React JS - 这个程序是如何工作的

Question

我在Codeacademy上了React.JS课程。这个问题来自 React .JS第 II 部分。我正在学习编程模式，但我无法理解这种模式是如何工作的

法典：

Parent.js
var React = require('react');
var ReactDOM = require('react-dom');
var Child = require('./Child');
var Parent = React.createClass({
  getInitialState: function () {
    return { name: 'Frarthur' };
  },
  changeName: function (newName) {
    this.setState({
      name: newName
    });
  },
  render: function () {
    return (
        <Child 
            name={this.state.name} 
        onChange={this.changeName}
        />
    );
  }
});
ReactDOM.render(
    <Parent />, 
    document.getElementById('app')
);

第二部分：

Child.js
var React = require('react');
var Child = React.createClass({
  handleChange: function (e) {
  var name = e.target.value;
  this.props.onChange(name);
},
  render: function () {
    return (
      <div>
        <h1>
          Hey my name is {this.props.name}!
        </h1>
        <select id="great-names" onChange={this.handleChange}>
          <option value="Frarthur">
            Frarthur
          </option>
          <option value="Gromulus">
            Gromulus
          </option>
          <option value="Thinkpiece">
            Thinkpiece
          </option>
        </select>
      </div>
    );
  }
});
module.exports = Child;

当我在<option>中更改名称时，程序会自动更改值并打印新的描述。但我无法理解这个函数是如何工作的：

handleChange: function (e) {
  var name = e.target.value;
  this.props.onChange(name);

有人可以一步一步解释吗？

Answer 1

1. 父组件将 name 和 onChange 处理程序传递给其子组件，子组件可以通过其 props 访问
2. 在子选择字段中包含一个处理程序，当您选择不同的名称时，将调用this.handlechange，它通过调用this.props.onChange来调用父项的changeName函数。
3. 更改父项中的 changeName 方法将状态设置为在子选择字段中选择的其他名称。
4. 然后更改状态再次自动传递给子级，作为子级的道具

Answer 2

  handleChange: function (e) {
  var name = e.target.value;
  this.props.onChange(name);

• 在 child.js 中，句柄更改函数与选择选项绑定。我们得到了e(event( in handleChange.
• 通过e.target，我们得到了目标元素，即选择下拉列表
• e.target.value 从"选择"下拉列表中检索所选值
• this.props.onChange(name(：将值传递给父组件和更改名称 在设置状态方法。