onClick метод React Button с использованием JSX

Question

Я начал изучать основы JS и написал небольшой пример, чтобы изучить, как кнопки работают в React с использованием JSX, но я нахожу это немного запутанным.

Сначала я создаю компонент React и инициализируюпеременная называется bar со значением 'bar' в конструкторе.

Я бы хотел изменить это значение на "baz" при нажатии кнопки.

Мой код выглядит следующим образом:

<div id="root"></div>
<script type="text/babel">

    class Foo extends React.Component {
      constructor(props) {
        super(props);
        this.bar = 'bar'
      }

      baz(){
        this.bar = 'baz'
      }

      render() {
        return (
          <div>
            <button onClick={this.baz()}>baz</button>
            <p>{this.bar}</p>
          </div>
        );
      }
    }

    ReactDOM.render(
      <Foo />,
      document.getElementById('root')
    );

</script>

Вопреки моим ожиданиям, значение 'baz' отображается сразу же, когда я загружаю страницу, содержащую этот код, в моем браузере.

Извините за вопрос, вероятно, очень новыйвопрос, но я не понимаю, почему «баз» отображается сразу, а не только после того, как я нажал кнопку.Спасибо за ваше время:)

Answer 1

Я указал решение в комментарии выше, поэтому я добавлю этот комментарий чуть подробнее ...

У вас есть ...

<button onClick={this.baz()}>baz</button>

Вы хотите...

<button onClick={() => this.baz()}>baz</button>

Я также обработал остальную часть вашего кода, чтобы получить желаемый результат («Я хотел бы изменить это значение на« baz »при нажатии кнопки».).Вам также нужно ...

this.setState(this);

Полный рабочий пример можно посмотреть здесь:

https://codesandbox.io/s/vj904qy4o0

Answer 2

import React, { Component } from "react";

class Bar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      bar: "bar"
    };
  }

  handleClick = () => {
    this.setState({ bar: "baz" });
  };

  render() {
    const value = this.state.bar;
    return (
      <div>
        <button onClick={this.handleClick}>baz</button>
        <p>{value}</p>
      </div>
    );
  }
}

пара вещей:

• установить состояние в конструкторе
• использовать функции стрелок (вместо привязки в конструкторе ... очиститель)
• используйте const при назначении значения, которое не изменится в функции

Answer 3

вы можете попробовать это

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: "bar" };
  }

  baz() {
    this.setState({ text: "baz" });
  }

  render() {
    return (
      <div>
        <button onClick={() => this.baz()}>baz</button>
        <p>{this.state.text}</p>
      </div>
    );
  }
}

ReactDOM.render(<Foo />, document.getElementById("root"));

. Дело в том, чтобы обновить экран (DOM), чтобы лучше изменить состояние, чтобы позволить компоненту перерисовываться.А что касается проблемы, значение которой было изначально изменено, другие ответы хорошо их объясняют

Answer 4

Вам нужно сохранить ваши значения в состоянии, а затем привязать обработчик щелчка к компоненту.Затем используйте setState (), чтобы изменить значение состояния.Когда состояние изменится, ваш компонент будет перерисован

class Foo extends React.Component {
      constructor () {
        super()
        this.state = {
          bar: 'bar'
        }
        this.handleClick = this.handleClick.bind(this)
      }
      handleClick () {
        this.setState({
          bar: 'baz'
        })
      }
      render () {
        return (
          <div>
            <button onClick={this.handleClick}>baz</button>
            <p>{this.state.bar}</p>
          </div>
        )
      }
    }

Answer 5

Вы вызываете функцию baz во время рендеринга, поэтому изменение происходит немедленно:

        <button onClick={this.baz()}>baz</button>

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

        <button onClick={() => this.baz()}>baz</button>

Answer 6

Причина, по которой baz отображается сразу же, заключается в том, что вы вызываете функцию в привязке щелчка.Вы также должны привязать ваш обработчик кликов к вашему классу React.Вот пример того, как это должно выглядеть:

<div id="root"></div>
<script type="text/babel">

    class Foo extends React.Component {
      constructor(props) {
        super(props);
        this.bar = 'bar';
        this.handleClick = this.handleClick.bind(this);
      }

      handleClick() {
        this.bar = 'baz';
      }

      render() {
        return (
          <div>
            <button onClick={this.handleClick}>baz</button>
            <p>{this.bar}</p>
          </div>
        );
      }
    }

    ReactDOM.render(
      <Foo />,
      document.getElementById('root')
    );

</script>

Answer 7

То, как вы пытаетесь использовать функцию, неверно.Обратитесь к одному из следующих двух методов.Кроме того, свяжите вашу функцию с этим контекстом в конструкторе.

this.baz = this.baz.bind(this);

Затем

onClick={this.baz}

ИЛИ

onClick={() => this.baz()}