1

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

誰かが順を追って説明してもらえますか？

4

2 に答える 2

0 
  handleChange: function (e) {
  var name = e.target.value;
  this.props.onChange(name);
  • child.js では、select オプションで handleChange 関数をバインドします。handleChange で e(event) を取得しました。
  • e.target によって、対象となる要素を取得しました。つまり、ドロップダウンを選択します。
  • e.target.value 選択ドロップダウンから選択された値を取得します
  • this.props.onChange(name) : 値を親コンポーネントに渡し、changeName は setState メソッドを使用して名前の値を変更します。
于 2017-06-14T05:12:31.580 に答える