Что делает функция в программе? React.JS

323
15 июня 2017, 07:59

Прохожу курс по React.JS на Codeacademy. Но не могу понять, как работает этот код. Все объяснение на английском языке, и оно такое ужасное и непонятное, что хочу задать вам этот вопрос. Этот курс по паттернам программирования. У нас есть , в котором заданы имена и их описания. Когда меняем имя в , то описание тоже меняется.

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;
When I change the name in the <option>, the program automatically changes value and prints the new description. But I cannot understand how this function works:
handleChange: function (e) {
  var name = e.target.value;
  this.props.onChange(name);

Больше всего не могу понять, как работает

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

Что такое target.value, как вообще работает.. Неужели нету более понятного и изящного решения? Взял React.JS пару дней назад, сильно не ругайте. Паттерны программирования пока вообще не понимаю...

READ ALSO
Iframe оплата от Яндекса

Iframe оплата от Яндекса

Помогите, пожалуйста

346
Добавить класс active

Добавить класс active

Имеется опросник, где каждый блок вопроса имеет класс (wp-polls)

433