Передать переменную в реакции

У меня есть его код, в котором я пытаюсь передать переменную в handleclick fcn и установить состояние этой переменной:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'Initial State'
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(temp) {
    this.setState({
      name:temp
    });
  }
  render() {
    return (
      <div>
        <button onClick = {this.handleClick('name')}>Click Me</button>
        <h1>{this.state.name}</h1>
      </div>
    );
  }
};

Это не работает, может кто-нибудь объяснить, как передать переменную и установить ей состояние, если это возможно?

reactjs state

04.11.2018 22:39

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Записывая this.handleClick('name'), вы вызываете функцию handleClick непосредственно при рендеринге. Вы хотите передать функцию опоре onClick, которая будет вызываться при щелчке мышью.

Пример

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "Initial State"
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(temp) {
    this.setState({
      name: temp
    });
  }
  render() {
    return (
      <div>
        <button onClick = {() => this.handleClick("name")}>Click Me</button>
        <h1>{this.state.name}</h1>
      </div>
    );
  }
}

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

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id = "root"></div>

Отлично, спасибо! Я попытался отметить это как ответ, но мне нужно подождать 10 минут

— 04.11.2018 22:45

Это приведет к созданию стрелки на каждом рендере, что нежелательно, если этого можно избежать.

— 04.11.2018 22:45

Итак, какое решение было бы лучше?

— 04.11.2018 23:03

@ Jrobm2k9 Не беспокойся об этом. Если ваш вариант использования абсолютно требует его преждевременной оптимизации, вы можете использовать атрибут данных.

— 04.11.2018 23:07

04.11.2018 22:42