ReactJs: отобразить данные состояния на флажках

Question

Я пытаюсь отобразить сетку флажков. Я могу проверить флажок и отключить обработчик, который обновляет массив значений.

Моя проблема в том, когда я просматриваю страницу. Мне бы хотелось увидеть флажки со значением в массиве, отмеченным как значение по умолчанию.

Может ли кто-нибудь сказать мне, как это сделать? Большое спасибо

handler: function(e) { 

    channel.publish({ 
     channel: "contact", 
     topic: "selectedContact", 
     data: { 
      id: e.target.attributes['data-ref'].value 
     } 
    }); 
}, 

render: function() { 

    var id = this.props.data.id; 
    var isSelected = this.props.data.isSelected; 

    return (
     <div className="contact-selector"> 
      <input type="checkbox" 
       checked={isSelected} data-ref={id} 
       onClick={this.handler} /> 
     </div> 
    ); 
}, 

Я мой выбранное состояние передается в качестве реквизита:

реквизита: Object данные: Объект контакты: Array [10] 0: Объект Id: 13211, IsSelected: правда

У меня есть скриншот состояния, которое содержит значение isSelected, но я не могу узнать, как получить это значение в проверенном свойстве компонента? Нужно ли мне каким-либо образом отображать его?

Мое начальное значение:

this.props.data.isSelected

Но значение IsSelected записывается в массив контактов в приложении

Answer 1

Вы должны сделать флажок a так называемый controlled component. Короче говоря, если вы присвоили ему только значение prop (this.props), фактическое значение флажка не изменилось бы, пока компонент не будет повторно установлен, поскольку свойство никогда не изменится, кроме случаев, когда компонент будет повторно установлен с новыми свойствами. Поэтому вам нужно добавить обработчик onChange и обновить состояние компонента при каждом щелчке, чтобы компонент повторно отображал новое состояние. Что-то вроде этого:

getInitialState: function() { 
    return {isSelected: this.props.data.isSelected}; 
}, 
handleChange: function(e) { 
    var selected = !this.state.isSelected; 
    this.setState({isSelected: selected}); 
}, 
render: function() { 

    var id = this.props.data.id; 
    var isSelected = this.state.isSelected; 

    return (
     <div className="contact-selector"> 
      <input type="checkbox" 
       checked={isSelected} 
       data-ref={id} 
       onClick={this.handler} 
       onChange={this.handleChange} 
      /> 
     </div> 
    ); 
}