0

Есть простейший компонент - форма. В нём инпут и кнопка. Подскажите, почему, если на кнопку, повесить событие onClick и записать так: onClick = {() => console.log(value)}, то код работает (для меня) ожидаемо, т.е. я что-то вписываю в инпут, жму на кнопку и вижу в консоли, содержимое инпута. Но, если, записать вот так: onClick = {console.log(value)}, то данные выводятся в консоль, сразу же, после изменений в инпуте, не дожидаясь клика по кнопке. Другими словами, в чем разница, между записями onClick = {() => console.log(value)} и onClick = {console.log(value)}, на примере моего компонента?

import { Component } from "react";

export default class ItemAdder extends Component {
  state = {
    value: ""
  };

  onInputChange = (event) => {
    this.setState({
      value: event.target.value
    });
  };
  onSubmit = (e) => {
    e.preventDefault();
  };

  render() {
    let {value} = this.state;
    return (
      <form className="formAdd" onSubmit={this.onSubmit}>
        <input
          type="text"
          value={this.state.value}
          placeholder="Add ToDo item here"
          onChange={this.onInputChange}
        />

        <button className="add"
         onClick = {console.log(value)}>+</button>
      </form>
    );
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

2 ответа 2

0

При вот такой записи

onClick = {() => console.log(value)}

вы инициализируете функцию (callback), которая будет исполняться только при наступлении события event'a. Ничего такого в этом нет и будет работать, как и должно, но есть одно НО: при каждом рендере будет создаваться новая функция. Это надо учитывать и вот такой вид не то, чтобы правильней, но позволяет избегать некоторых ошибок

clickMe = () =>{
  console.log(this.state);
}
....
  render() {
...
    <button className="add"
         onClick = {this.clickMe}>+</button>
...
}

или

clickMe(){
  console.log(this.state);
}
....
  render() {
...
    <button className="add"
         onClick = {() = > this.clickMe()}>+</button>
...
}

В противном случае запись

onClick = {console.log(value)}

вы буквально говорите -> "При рендере в слушатель onClick передать это - вывести в консоль value". А должно быть -> "При рендере определить/передать функцию (callback) которая исполняется при наступлении события"

UPD здесь наверное необходимо погружение в то, что называется callback. Здесь можно почитать. А вот насколько глубоко вы собрались погружаться, я не знаю. Весь код открыт, можете проследить как определен onClick.
Пример:
Определение button

button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;

Какие пропсы

type DetailedHTMLProps<E extends HTMLAttributes<T>, T> = ClassAttributes<T> & E;

Смотрим от что наследуем HTMLAttributes

interface DOMAttributes<T> {
        children?: ReactNode | undefined;
        dangerouslySetInnerHTML?: {
            __html: string;
        } | undefined;
......
        // MouseEvents
        onAuxClick?: MouseEventHandler<T> | undefined;
        onAuxClickCapture?: MouseEventHandler<T> | undefined;
        onClick?: MouseEventHandler<T> | undefined;

и так далее

1
  • Ок, спасибо, как фиксить - разобрался. Но до меня, увы, всё никак не доходит, почему срабатывает событие, хотя по сути, я его не генерил. Я ведь не жал на кнопку. 18 ноя 2021 в 10:50
0

() => console.log(value) - это функция. Если ее передать в onClick, то она будет вызвана, когда произойдет событие click.

console.log(value) - это вызов функции, который возвращает undefined. Если его передать в onClick, то это все равно что передать onClick={undefined} - то есть на событие ничего вызываться не будет. А вывод в консоль происходит при вызове render(), который происходит каждый раз при изменении инпута (= изменение стейта).

2
  • Не могли бы уточнить, почему "console.log(value) - это вызов функции, который возвращает undefined"? Вроде бы в коде, который в примере, value у нас всегда имеет какое-то значение 18 ноя 2021 в 10:47
  • console.log - это функция, console.log() - вызов этой функции. Если сделать let x = console.log(value), то в консоль выведется значение value, но значение x будет undefined
    – p1uton
    18 ноя 2021 в 11:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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