Question

我正在玩ReactJs，我想知道是否可以使用具有属性的状态对象。现在我在下面创建了一个伪代码示例，其中有一个简单的对象，但是我想处理我有很多具有自己属性的对象的情况。

E.g。我想处理以下案件：

//Initialize object
getInitialState: function() {
    return {
        myObject: {
            prop1: "",
            prop2: ""
        }
    };
}

//How I would assign to a property of that object
setProp1: function(event) {
    this.setState({myObject.prop1: event.target.value});
},

//Rendering the item (jsx)
<div>
    <div className="custom">{myObject.prop1}</div>
    <span>{myObject.prop2}<span>
</div>

上面的例子有可能吗？或者我是否需要将每个属性直接附加到州？在Reactjs中处理这种情况的最佳方法是什么？

Answer 1

最好的办法是创建一个更改了指定属性的新对象。您可以使用Object.assign（必要时使用shims或libraries）执行此操作：

var newMyObj = Object.assign({}, this.state.myObject, {
  prop1: event.target.value
});
this.setState({myObject: newMyObj});

您还可以使用React immutability helpers来帮助更新嵌套结构：

var newMyObj = update(this.state.myObject, { prop1: { $set: event.target.value } });
this.setState({myObject: newMyObj});

如果您正在使用Babel，JSX或支持ES7 rest/spread property操作的东西，您可以稍微简化代码（这是我最喜欢的选项，因为我觉得它更好）：

var newMyObj = {
  ...this.state.myObject,
  prop1: event.target.value
};
this.setState({myObject: newMyObj});

您经常会看到只更新现有对象并重新设置状态的示例，但建议您不要这样做：

// antipattern!
this.state.myObject.prop1 = event.target.value;
this.setState({myObject: this.state.myObject});

ReactJs：如何处理具有属性

1 个答案: