В React, как установить флажок ввода в зависимости от значения объекта

Функция флажка работает нормально и обновляет выбранное входное значение в this.state = { answers: [] };. В то же время флажки не отображаются как выбранные при загрузке страницы при загрузке страницы с

this.state = { 
  answers: [
    {
      questionID: 4, 
      answerValues: ["1", "2", "3", "4"]
    }
  ] 
}

Демо: https://codesandbox.io/s/7jlq387686

{options.map(option => {
  var tick = checked.answerValues.find(answer => answer == option.id );
  return (
    <div className = "form-check" key = {option.id}>
      <label className = "radio-inline" htmlFor = {`${name}-${option.id}`}>
        <input
          name = {name}
          id = {`${name}-${option.id}`}
          type = "checkbox"
          value = {option.id}
          onChange = {e => this.handleChangeEvent(e, option.id)}
          checked = {option.id == tick}
        />{" "}
        {option.value}
      </label>
    </div>
  );
})}

В текущем фрагменте есть две проблемы 1) При выборе из флажка он работает, но предварительно выбранные элементы становятся невыделенными 2) при загрузке страницы флажок не работает, он говорит Невозможно прочитать свойство "найти" из неопределенного

javascript arrays json reactjs ecmascript-6

30.03.2018 00:07

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

333

Ответы 1

Проблема 1

Вы пропустили инициализацию выбранного атрибута, соответствующего проверенному реквизиту:

constructor(props, context) {
   super(props, context);

   this.selected = this.answerValues
     .reduce((obj, curr) => ({ ...obj, [curr]: true }), {});

   this.handleChangeEvent = this.handleChangeEvent.bind(this);
 }

Также добавьте этот геттер, чтобы избежать ошибок, когда он не определен:

 get answerValues() {
   const { answerValues = [] } = this.props.checked || {};
   return answerValues;
 }

Note: Also you can use directly defaultProps to avoid this.

Проблема 2

Вместо этой строки при рендере:

var tick = checked.answerValues.find(answer => answer == option.id);

Использовать:

var tick = this.answerValues.find(answer => answer == option.id);

Разъяснения

В handleChangeEvent из InputCheckbox вы сохраняли новый answerValues как Object.keys(this.selected), и вначале этот выбранный объект был пустым, это означает, что вы теряли первое состояние. Чтобы сохранить первое состояние, вам нужно инициализировать выбранный атрибут.
Поиск undefined произошел из-за того, что еще нет массива ответов, вы не можете исправить это, используя предложенный мной метод получения, или также используя настройку defaultProps на значение по умолчанию, когда этот массив не определен.

Песочница: https://codesandbox.io/s/wnv238j1ww

Я сохранил изменения в песочнице, решив проблему, о которой вы сказали, и обновил ответ stackoverflow :)

— 30.03.2018 20:13

30.03.2018 00:56