ReactJS - Использование .setState для изменения вложенных значений

Question

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

Как использовать .setState для установки состояния определенного элемента? Такие, как this.state.data[0].checked

Я пытаюсь установить состояние с чем-то вроде этого, которое будет только обновить data на данный момент:

handleChange: function(event) { 
    this.setState({data: event.target.value}}); 
    }, 

Answer 1

Похоже, что вы могли бы использовать immutability helpers, и если вы используете цифровой/динамический ключ, вы должны посмотреть на мой question here.

Ваше решение будет выглядеть примерно так:

handleChange: function(index, event) { 
    var data = React.addons.update(this.state.data, { 
    [index]: { 
    checked: {$set: event.target.checked} 
    } 
    }); 
    this.setState({ 
    data: data 
    }) 
}, 

Обратите внимание на использование e.target.checked и не e.target.value для галочки, чтобы получить логическое состояние, а не значение, связанное с флажком.

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

onChange={this.handleChange.bind(this, i)}