Question

我有一个列表（父母）有很多项目（孩子）。列表上有一个巨大的保存按钮。当用户按下该按钮时，我希望将所有孩子的save()方法解雇。

通常，我会为此（或某些PubSub实现）使用自定义事件，但我想知道：React.js实现此目的的方式是什么？

Answer 1

父级应具有状态并使用props渲染子级。这只是一个例子，没有经过测试。

父：

var Parent = React.createClass({
getInitialState: function(){
     return {array: []}
},
handleChange: function(key, value){
 // here will you get key and value from child input.
   this.setState({array[key]: value});
}, 
saveAll: function(){
     // this.state.array have all data, lets save it :)
},
render: function(){
     var self = this;
     var items = [];
     this.state.array.map(function(item, key){
           items.push(<Child handleChange={self.handleChange} index={key} value={item} />);
     });
     return (<div>{items} <button onClick={this.saveAll}>SaveAll</button> </div>
}
});

子：

var Child = React.createClass({
    onChange: function(event){
         this.props.handleChange(this.props.index, event.target.value);
    },
    render: function(){
          return (<li><input value={this.props.value} onChange={this.onChange} />)
    }
});

家长告知孩子

1 个答案: