React：如何在setState上更新state.item [1]？ （用JSFiddle） [英] React: How do I update state.item[1] on setState? (with JSFiddle)

问题描述

我正在创建一个用户可以设计自己的表单的应用程序。例如。指定字段的名称以及应包含哪些其他列的详细信息。

I'm creating an app where the user can design his own form. E.g. specify name of the field and details of which other columns that should be included.

该组件可用作JSFiddle 这里。

The component is available as a JSFiddle here.

我的初始状态如下：

var DynamicForm = React.createClass({
  getInitialState: function() {
   var items = {};
   items[1] = { name: 'field 1', populate_at: 'web_start',
                same_as: 'customer_name',
                autocomplete_from: 'customer_name', title: '' };
   items[2] = { name: 'field 2', populate_at: 'web_end',
                same_as: 'user_name', 
                    autocomplete_from: 'user_name', title: '' };

     return { items };
   },

  render: function() {
     var _this = this;
     return (
       <div>
         { Object.keys(this.state.items).map(function (key) {
           var item = _this.state.items[key];
           return (
             <div>
               <PopulateAtCheckboxes this={this}
                 checked={item.populate_at} id={key} 
                   populate_at={data.populate_at} />
            </div>
            );
        }, this)}
        <button onClick={this.newFieldEntry}>Create a new field</button>
        <button onClick={this.saveAndContinue}>Save and Continue</button>
      </div>
    );
  }

我想在用户更改任何值时更新状态，但是我很难定位正确的对象：

I want to update the state when the user changes any of the values, but I'm having a hard time to target the correct object:

var PopulateAtCheckboxes = React.createClass({
  handleChange: function (e) {
     item = this.state.items[1];
     item.name = 'newName';
     items[1] = item;
     this.setState({items: items});
  },
  render: function() {
    var populateAtCheckbox = this.props.populate_at.map(function(value) {
      return (
        <label for={value}>
          <input type="radio" name={'populate_at'+this.props.id} value={value}
            onChange={this.handleChange} checked={this.props.checked == value}
            ref="populate-at"/>
          {value}
        </label>
      );
    }, this);
    return (
      <div className="populate-at-checkboxes">
        {populateAtCheckbox}
      </div>
    );
  }
});

我应该如何制作 this.setState to让它更新 items [1] .name ？

How should I craft this.setState to get it to update items[1].name ?

推荐答案

你可以使用 更新不可变性帮助程序：

You could use the update immutability helper for this:

this.setState({
  items: update(this.state.items, {1: {name: {$set: 'updated field name'}}})
})

或者如果你不关心是否能够使用 === shouldComponentUpdate（）生命周期方法检测此项目的更改，您可以直接编辑状态并强制组件重新渲染 - 这实际上与@limelights的答案相同，因为它将对象拉出状态并进行编辑。

Or if you don't care about being able to detect changes to this item in a shouldComponentUpdate() lifecycle method using ===, you could edit the state directly and force the component to re-render - this is effectively the same as @limelights' answer, as it's pulling an object out of state and editing it.

this.state.items[1].name = 'updated field name'
this.forceUpdate()

---

编辑后添加n：

查看反应培训的/ 03-simple-component-communication.md>简单组件通信课程如何将回调函数从状态保持父项传递到需要触发状态更改的子组件的示例。

Check out the Simple Component Communication lesson from react-training for an example of how to pass a callback function from a state-holding parent to a child component which needs to trigger a state change.

这篇关于React：如何在setState上更新state.item [1]？ （用JSFiddle）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！