Javascript React.js从按钮修改父级的状态

我只是在深入研究。在我的粗略示例中，我希望使用delete按钮从items数组中删除一个项。在Btn组件中如何从handleClick执行此操作？或者最好的处理方法是什么

var data= {
"items": [
    {
        "title": "item1"
    },
    {
        "title": "item2"
    },
    {
        "title": "item3"
    }
]
};



var Btn = React.createClass({

handleClick: function(e) {
console.log('clicked delete'+ this.props.id);
  //how does delete button modify this.state.items in TodoApp?

},
render: function() {
return <button onClick={this.handleClick}>Delete</button>;
}
});

var TodoList = React.createClass({

render: function() {
var createItem = function(itemText, index) {
  return <li key={index + itemText}>{itemText} &nbsp;<Btn id={index} /></li>;
};
return <div><ul>{this.props.items.map(createItem)}</ul></div>;
}
});



var TodoApp = React.createClass({

getInitialState: function() {
  console.log("getInitialState");

return data;
  },



  onChange: function(e) {
    this.setState({text: e.target.value});
  },
  handleSubmit: function(e) {
    e.preventDefault();
    var nextItems = this.state.items.concat([this.state.text]);
    var nextText = '';
    this.setState({items: nextItems, text: nextText});
  },
  render: function() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <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('container'));

---

通过向Btn组件发送回调。在中进一步解释。

通量方法是更新数据存储并触发应用程序的渲染，例如：

var deleter = function(id) {
  data.items.splice(id,1)
  React.render(<TodoApp />,
    document.getElementById('container'));
}

[...]

handleClick: function(e) {
    deleter(this.props.id)
}

---

演示：

这个简单的应用程序是否适合包含操作、调度、存储和查看的流量模式？在deleter中再次调用渲染时，是差异渲染还是完全重新渲染？这个应用程序是否应该有一个加法器来添加一行，而不是当前的实现方式？@user1594257是的，它是合适的，但当我写Flux时，我主要指的是单向数据原理，不一定指框架。不，这不是一个完整的渲染，只是一个差异。是的，你应该有一个加法器功能以及。