Question

我正在学习一些反应。我开始使用TodoApp。 TodoApp调用组件TodoList。现在在每个项目上，当用户点击它时，我希望它触发TodoApp.rmItem（i，e）的功能，所以我尝试了这个：

var TodoList = React.createClass({
    createItem: function(itemText, index) {
      return <li key={index + itemText} onClick={this.context.rmItem.bind(null, index)}>{itemText}</li>; ////////////// ISSUE
    },
  render: function() {
    return <ul>{this.props.items.map(this.createItem)}</ul>;
  }
});

var TodoApp = React.createClass({
  getInitialState: function() {
    return {items: [], text: ''};
  },
  onChange: function(e) {
    this.setState({text: e.target.value});
  },
  handleSubmit: function(e) {
    e.preventDefault();
    this.state.items.push(this.state.text);
    this.state.text = '';
    this.forceUpdate();
  },
  rmItem: function(i, e) {
    console.log('e:', e);
    alert(this.state.items[i]);
  },
  render: function() {
    return (
      <div>
        <h3>TODO</h3>
        <form onSubmit={this.handleSubmit}>
          <input onChange={this.onChange} value={this.state.text} />
          <button>{'Add #' + (this.state.items.length + 1)}</button>
        </form> 
        <TodoList items={this.state.items} />
      </div>
    );
  }
});

ReactDOM.render(<TodoApp />, mountNode);

问题是注释行：

 onClick={this.context.rmItem.bind(null, index)}

如何点击父范围，并为其提供参数？

这个例子不成立：https://facebook.github.io/react/tips/communicate-between-components.html

我想到的唯一解决方案是在这里设置范围：

<TodoList items={this.state.items} />

添加它，这个：

<TodoList items={this.state.items} parentScope={this} />

由于

在TodoApp中，单击TodoApp中的TodoList调用函数中的项目

0 个答案: