Question

我正在寻找一些有用的信息，如何处理来自child的父组件并找到一些代码，除了片刻之外，我理解这段代码中的所有内容。所以这是代码

var App = React.createClass({
  getInitialState:function() {
    return {
      items: [1,2,3,4,5,6,7,8]
    }
  },

  handleClick:function() {
    var newItem = this.refs.textRef.getDOMNode().value;
    var newItems = this.state.items.concat([newItem]);
    this.setState({
      items: newItems
    });
    this.refs.textRef.getDOMNode().value = "";
  },

  deleteItem:function(item) {
    var index = this.state.items.indexOf(item);
    var newItems = undefined;
    if (index > -1) {
      this.state.items.splice(index, 1);
      newItems = this.state.items;
      this.setState({
        items: newItems
      })
    };
  },

  render:function() {
    var item = this.state.items.map(function(item,i) {
      return <SubItem key={i} someText={item} onDelete={this.deleteItem}/>
    }.bind(this)); // dont understand
    return (<div>
              <input ref="textRef" type="text"/>
              <button onClick={this.handleClick}>Click Me</button>
              {item}
            </div>)
  }
});

var SubItem = React.createClass({
  handleDelete:function() {
    this.props.onDelete(this.props.someText)
  },
  render:function() {
    return  (<ul>
              <li onClick={this.handleDelete}>{this.props.someText}</li>
            </ul>)
  }
})

React.render(<App />, document.body)

我已经在handleDelete函数

中破坏了对React的理解

handleDelete:function() {
        this.props.onDelete(this.props.someText)
      },

它是什么意思，它是如何运作的？小提琴here 提前致谢

Answer 1

您正在向子组件传递回调deleteItem。

单击子组件时会触发handleDelete函数，该函数会触发父项中的onDelete回调deleteItem。

这是React中的常见模式：https://facebook.github.io/react/tips/communicate-between-components.html

Answer 2

this.props.onDelete参考父组件的deleteItem功能。
this.props.someText在此案例中提及item items州的一个元素[1,2,3,4 ..]

例如，this.props.onDelete(1)（如果this.props.someText = 1）。它实际上调用了父项的deleteItem(1)。

对于this.state.items.map(function(item,i)，您可以这样翻译：

for( var i = 0; i < items.length; i++)
 {
    var item += <Subitem key={i} someText={items[i]} onDelete={this.deleteItem}/>
  }

如果您想了解bind(this)部分。这是doc。

我希望它会对你有所帮助！：）

如何处理来自父级的子组件

2 个答案: