1

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

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

4

2 回答 2

1
  1. 父组件将 name 和 onChange 处理程序传递给其子组件，子组件可以通过其 props 访问
  2. 在子选择字段中包含一个处理程序，当您选择不同的名称时，会调用 this.handlechange，它通过调用 this.props.onChange 来调用父级的 changeName 函数。
  3. 父项中的 changeName 方法将状态设置为在子选择字段中选择的不同名称。
  4. 然后更改状态再次自动传递给孩子，作为孩子的道具
于 2017-06-14T05:06:43.687 回答
0 
  handleChange: function (e) {
  var name = e.target.value;
  this.props.onChange(name);
  • 在 child.js 中，handleChange 函数与 select 选项绑定。我们在handleChange 中得到了e(event)。
  • 通过 e.target 我们得到了目标元素，即选择下拉
  • e.target.value 从选择下拉列表中检索选定的值
  • this.props.onChange(name) ：将值传递给父组件，changeName 借助 setState 方法更改名称的值。
于 2017-06-14T05:12:31.580 回答