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

【问题标题】：React JS - How does this program work?React JS - 这个程序是如何工作的？
【发布时间】：2017-11-16 01:41:43
【问题描述】：

我在 Codeacademy 学习了 React.JS 课程。这个问题来自 React.JS 第二部分。我正在学习编程模式，但我不明白这种模式是如何工作的

代码：

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);

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

【问题讨论】：

“我不明白这个函数是如何工作的” 你特别不明白什么？这个功能没什么特别的……
这个handleChange函数有什么作用？
这不能回答我的问题。你在寻找什么样的解释？所有函数的工作方式都是一样的：当一个函数被调用时，函数体中的每一条语句都会被执行。
I took React.JS course in Codeacademy - 你能再上这门课吗？
handleChange 做什么？

标签： javascript reactjs react-native architectural-patterns

【解决方案1】：

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

在 child.js 中，handleChange 函数与选择选项绑定。我们有 handleChange 中的 e(event)。
通过 e.target 我们得到了目标元素，即选择下拉列表
e.target.value 从选择下拉列表中检索选定的值
this.props.onChange(name) : 将值传递给父组件和 changeName 在帮助下更改名称的值 setState 方法。

【讨论】：

【解决方案2】：

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

【讨论】：