从子元素到父元素的React状态绑定

react state bind from child to parent element

本文关键字：元素 React 状态 绑定      更新时间：2023-09-26

我是reactJS新手

我有一个JSON数组，其中包括任务。我已经将数组渲染为2个列表。一个已完成任务，另一个未完成任务。如果我点击任务的状态正在改变，但它不是更新在其他元素。但是，如果我在输入状态中输入一些文本，则设置为其他元素。为什么当我点击任务时没有立即设置状态?

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<body>
<div id="todo">
</div>
<script type="text/jsx">
    var TodoList = React.createClass({
        clickHandle: function(index) {
            this.props.items[index].completed=!this.props.items[index].completed;
            console.log(this.props);
            this.setState({items: this.props.items});
        },
        render: function() {
          var createItem = function(itemText, index) {
            if(itemText.completed===this.props.completed)
                return <li key={index} onClick={this.clickHandle.bind(this,index)}>{itemText.text}</li>;
          };
          return <ul>{this.props.items.map(createItem, this)}</ul>;
        }
      });
      var TodoApp = React.createClass({
        getInitialState: function() {
          return {items: [{"text":"1true","completed":true},{"text":"2true","completed":true},{"text":"1false","completed":false}], text: ''};
        },
        onChange: function(e) {
          this.setState({text: e.target.value});
        },
        handleSubmit: function(e) {
          e.preventDefault();
          if(this.state.text!=''){
              this.state.items.push({"text":this.state.text,"completed":false});
              var nextText = '';
              this.setState({items:this.state.items,text: nextText});
          }
          else{
            alert("Enter some text!");
          }
        },
        render: function() {
          return (
            <div>
              <h3>TODO</h3>
              <TodoList items={this.state.items} completed={false}/>
              <TodoList items={this.state.items} completed={true}/>
              <form onSubmit={this.handleSubmit}>
                <input onChange={this.onChange} value={this.state.text} />
                <button>{'Add #' + (this.state.items.length + 1)}</button>
              </form>
            </div>
          );
        }
      });
      React.render(<TodoApp />, document.getElementById('todo'));
</script>

JSFiddle

之所以会发生这种情况，是因为呈现两个列表的父组件TodoApp不知道其中一个列表发生了更改。为此，子组件应该通知父组件。

为TodoList添加onStatusUpdate属性，如下所示

<TodoList items={this.state.items} completed={false} onStatusUpdate={this.update}/>

更新方法是这样定义的

update: function(items){
  this.setState({items: items});
}

在子组件的click处理程序中执行如下操作

clickHandle: function(index {
  this.props.items[index].completed=!this.props.items[index].completed;
  this.props.onStatusUpdate(this.props.items); // <-- this triggers the onStatusUpdate attribute defined in TodoList component
},

这里是一个更新的演示https://jsfiddle.net/dhirajbodicherla/aqqcg1sa/2/'

相关文章：