Question

我的代码无效。请指教。

parent = react.createClass({
     getInitialState: function(){
         return {tags:{}};
     },
     render:function(){
         return <child update={this.updateState}/>
     },
     updateState: function(value){
         existing = this.state.tags;
         existing[0] = value
         // 
         **// Should output value entered in child.**
         console.log("existing") // Actual output is {}

     }
});
child = react.createClass({
     getInitialState: function(){
         return {value:""};
     },
     change: function(event){
         this.setState({value: event.target.value})
     },
     render:function(){
         return <input onBlur={this.update} onChange={this.change}/>
     },
     update: function(){
         this.props.update(this.state.value)
     }
});

代码中有评论解释问题。请让我知道我在做什么错误

更新：在this.updateState周围添加了大括号。

答案：我弄错了。以下行导致了问题。

existing = this.state.tags;

上面的语句指定this.state.tags对现有的引用。在reactjs中，状态是无法直接编辑的，我们应该使用this.setState。因此我们无法向现有数据添加任何数据，因为它指向this.state.tags。因此，为了解决这个问题，我们必须使用状态数据创建一个新的引用。

以下代码是解决上述问题的方法。

 existing = _.extend({}, this.state.tags);// import lodash library in underscore variable
 existing[0] = value;
 conosle.log(existing);

Answer 1

问题可能在return <child update=this.updateState/>行。

如果您按照以下方式附上更新道具：return <child update={this.updateState}/>，您应该能够使用console.log(existing)

读出现有值

在我更改该行之前，它不会为我编译。希望有所帮助。

Reactjs组件内部的变量不可写

1 个答案: