Передать значение проп в качестве параметра в функции стрелки в обработчике события onClick () в React

Question

Я пытаюсь передать значение prop в функцию, которая вызывается onClick (), но я получаю следующую ошибку, когда пытаюсь console.log () это значение внутри функции.

Ошибка:

** Предупреждение. Это искусственное событие используется повторно из соображений производительности.Если вы видите это, вы получаете доступ к свойству nativeEvent в освобожденном / аннулированном синтетическом событии.Это установлено в ноль.Если вам нужно сохранить оригинальное синтетическое событие, используйте event.persist ().

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.evaluateInfixString = this.evaluateInfixString.bind(this);
    this.appendInfixString = this.appendInfixString.bind(this);
    this.state = {
      buttons: ["+", "-", "*", "/", 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "clear", "="],
      infixString: null
    };
  }
  evaluateInfixString() {
    console.log("perform operation");
  }
  appendInfixString(buttonPressed) {
    console.log(buttonPressed);
  }
  render() {
    return (
      <div id={"calculator"}>
        <Display value={this.state.infixString} />
        <Buttons
          buttons={this.state.buttons}
          appendInfixString={this.appendInfixString}
        />
      </div>
    );
  }
}

class Display extends React.Component {
  render() {
    return <div id={"display"}>{this.props.value}</div>;
  }
}

class Buttons extends React.Component {
  render() {
    return (
      <div id={"buttons"}>
        {this.props.buttons.map(button => {
          return <button className={"button"} onClick={(button) => this.props.appendInfixString(button)}>{button}</button>;
        })}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Calculator />, rootElement);

Answer 1

То, что передается onClick, является событием щелчка, поэтому в вашем коде ниже

<button className={"button"} onClick={(button) =>this.props.appendInfixString(button)}>{button}</button>

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

<button className={"button"} onClick={() => this.props.appendInfixString(button)}>{button}</button>

Answer 2

Изменение:

return <button className={"button"} onClick={(button) =>  this.props.appendInfixString(button)}>{button}</button>;

На:

    return <button className={"button"} onClick={() => this.props.appendInfixString(button)}>{button}</button>;

Вот рабочая кодовая ручка .Если вы откроете консоль, вы увидите, что число или символ записаны в консоли для вас.

Еще один способ выполнить то, что вы хотели бы сделать, - это что-то вроде того, что я сделал в этом коде .Вы будете передавать событие обратно родителю, а затем получите доступ к значению с помощью e.target.value, как я показал в вашем родительском компоненте.В этом случае ваш дочерний компонент будет иметь обработчик щелчка, подобный следующему:

<button type="button" className={"button"} value={button} onClick={this.props.appendInfixString}>{button}</button>

Значение button будет возвращено с event в родительском щелчкеобработчик событий, доступ к которому вы можете получить.