Question

我是reactJS的新手

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

<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

Answer 1

这种情况正在发生，因为呈现两个列表的父组件TodoApp不知道其中一个列表中的某些内容发生了变化。为此，子组件应该通知父组件。

将onStatusUpdate属性添加到TodoList，如下所示

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

这就是如何定义更新方法

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

在子组件的单击处理程序中执行类似这样的操作

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/`

将状态绑定从子元素反应到父元素

1 个答案: