Что означает этот синтаксис handleChange = (name) => ({ target }) => {}?

Question

[GeorgeKay]

handleChange = (name) => ({ target }) => {
    this.setState({ [name]: target.value });
  };

вот с этими двумя стрелками вообще не понятно
я понимаю это такое сокращение, но если написать развернуто как этот же код будет выглядить

Answer 1

[Lynn «Кофеман»]

https://learn.javascript.ru/arrow-functions-basics

Функция возвращает функцию

Comments

[GeorgeKay]

а откуда берется таргет? что это за параметр

<TextField
            id="outlined-name"
            label="Name"
            className={classes.textField}
            value={name}
            onChange={handleChange("name")}
            margin="normal"
            variant="outlined"
          />

[Lynn «Кофеман»]

https://learn.javascript.ru/introduction-browser-events

https://ru.reactjs.org/docs/handling-events.html

[Lynn «Кофеман»]

target это стандартное свойство любого события
https://developer.mozilla.org/en-US/docs/Web/API/E...

[GeorgeKay]

ну здесь же не написано event.target

[Lynn «Кофеман»]

GeorgeKay, почитайте уже учебник какой-нибудь, а то я вам уже половину справочника в ссылках дал

https://learn.javascript.ru/destructuring-assignme...

Answer 2

[dollar]

handleChange = (name) => ({ target }) => {
    this.setState({ [name]: target.value });
};

То же, что и:

handleChange = function(name) {
    return function({ target }) {
        this.setState({ [name]: target.value });
    };
};

Или так:

handleChange = function(name) {
    return function(obj) {
        this.setState({ [name]: obj.target.value });
    };
};

Answer 3

[kirillcka_markoff]

handleChange возвращает функцию с изменением стейта.

используется скорее всего как то так:
<input onChange={() => handleChange('name')} />

в handleChange ты передаешь имя свойства в state во второй функции target инпута

Comments

[GeorgeKay]

но как этот таргет туда попадает, это такая деструктуризация и замыкание?

<TextField
            id="outlined-name"
            label="Name"
            className={classes.textField}
            value={name}
            onChange={handleChange("name")}
            margin="normal"
            variant="outlined"
          />

[kirillcka_markoff]

GeorgeKay, yap!

Но я бы сделал по другому!

<TextField
            id="outlined-name"
            label="Name"
            name="name"
            className={classes.textField}
            value={name}
            onChange={handleChange}
            margin="normal"
            variant="outlined"
          />

handleChange = ({ target }) => {
   this.setState({ [target.name]: target.value });
};

[kirillcka_markoff]

target это деструктуризация из event

[WbICHA]

используется скорее всего как то так:
<input onChange={() => handleChange('name')} />

Серьёзно?

Но я бы сделал по другому!
onChange={handleChange("name")}
handleChange = ({ target }) => {

Серьёзно???

[kirillcka_markoff]

WbICHA, Не заметил, что name передаю в функцию