1

Прохожу курс по 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 пару дней назад, сильно не ругайте. Паттерны программирования пока вообще не понимаю...

4
  • 1
    Так в чём конкретно вопрос? В том что такое e? Это DOM Event Object. У него есть свойство target - элемент, который запустил событие. У этого элемента есть свои свойства (например, value в данном случае).
    – Regent
    14 июн 2017 в 6:18
  • А что он делает? Почему то это для меня не так очевидно
    – Klugge
    14 июн 2017 в 7:43
  • target ничего не делает. Это свойство предоставляет вам cсылкy на объект, который отправил событие. Что бы могли с ним дальше работать. 14 июн 2017 в 8:02
  • e.target.value это значение выбранного селекта, это значение передается с помощью this.props.onChange(name); в родительский компонент, в родительском компоненте вызывается changeName, которые изменяет стейт, после изменения стейта перерендривается дочерний компонент.
    – greybutton
    14 июн 2017 в 8:54

1 ответ 1

2

e.target.value

e = событие (в данном случаи onChange)

target = элемент откуда пришло это событие

value = значение, находящиеся в этом элементе

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

Таким образом. произошло событие (e)

Переменной name присватается текущее значение (после отработки события onChange)

Далее идет изменение состояния в родительском компоненте с помощью прокинутого колбека (this.props.onChange(name))

Тот самый родительский метод, который меняется состояние:

changeName: function (newName) {
    this.setState({
      name: newName
    });
  }

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.