Question

我参加了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);

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

Answer 1

父组件传递名称，onChange处理程序传递给其子组，子组可以通过其支持
在子选择字段中包含一个处理程序，当你选择不同的名字时，会调用this.handlechange，它通过调用this.props.onChange来调用parent的changeName函数。
changeName方法将状态设置为在子选择字段中选择的不同名称。
然后更改状态再次自动传递给子节点，作为子节目

Answer 2

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

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

React JS - 这个程序如何工作？

2 个答案: