Кнопка onClick вызывается сотни раз каждую секунду - PullRequest
Новая
       15

Кнопка onClick вызывается сотни раз каждую секунду

0 голосов
/ 21 июня 2019

У меня есть функция onClick для кнопки, которая вызывается сотни раз в секунду без какого-либо реального взаимодействия с мышью. 

  constructor(props, context) {
    super(props, context);

    this.state = {
      show: this.props.show,
      store: this.props.store,
      price: this.props.price,
      category: this.props.category,
      date: this.props.date,
      shown: "inline",
      id: this.props.id
    };
  }
  kill = () => {
    this.props.kill(this.state.id);
  };
  render() {
    const divStyle = {
      padding: "1em",
      border: "1px solid black"
    };
    function trashCanVisible() {}
    function trashCanAway() {}

    return (
      <div display={this.state.shown}>
        <link
          rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
          crossOrigin="anonymous"
        />
        <Button variant="light">
          <Container>
            <Row>
              <div style={divStyle}>
                <Col>
                  <FontAwesomeIcon icon={faFilePdf} size="8x" />
                </Col>
              </div>
              <Col>
                <table>
                  <thead>{this.state.store}</thead>
                  <tr>
                    <td>{this.state.date}</td>
                  </tr>
                  <tr>
                    <tfoot>${this.state.price}</tfoot>
                  </tr>
                  <tr>
                    <td />
                  </tr>
                  <tr>
                    <p>{this.state.category}</p>
                  </tr>
                  <tr>
                    <td>{this.state.description}</td>
                  </tr>
                </table>
              </Col>
              <Col>
                <Button variant="light" onClick={this.kill()}>
                  <FontAwesomeIcon icon={faTrashAlt} size="1x" />
                </Button>
              </Col>
            </Row>
          </Container>
        </Button>
      </div>
    );
  }
}

Эта onClick={this.kill()} функция ссылается на функцию kill(),которая является переданной функцией, которая ссылается на функцию pop() в родительском классе: 

pop(id) {
    console.log("pop" + id);
  }

Я ожидаю, что функция onClick=kill() на кнопке внизу будет выполняться только при нажатии.Тем не менее, он работает все время и выдает консольный вывод, полный «pop1».

Ответы [ 2 ]

2 голосов
/ 21 июня 2019

Замените 

        <Button variant="light" onClick={this.kill()}>

на 

                <Button variant="light" onClick={this.kill}>

Вы вызываете метод kill () во время инициализации, а это не то, что вам нужно.Вы хотите передать ссылку на функцию в методе onClick, поэтому указанная функция вызывается только при срабатывании onClick ().

1 голос
/ 21 июня 2019

Измените его на onClick={() => this.kill()}, и вам будет хорошо go

...