onClick函数正在另一个事件侦听器上运行

Question

一直在玩弄反应。 有两个事件侦听器，其输入侦听onChange的输入和单击该值时应将值推送到数组的按钮。

这是代码：

import React, { Component } from 'react';
let arr = [];
class App extends Component {
  constructor() {
    super();
    this.state = {text: 'default'}
  }
  update( e ) {
    this.setState({text: e.target.value})
  }
  add ( value ) {
    arr.push(value)
    console.log(arr)
  }
  render() {
    return (
    <div>
      <h1>{this.state.text}</h1> 
      <input onChange={this.update.bind(this)}/>
      <button onClick={this.add(this.state.text)}>Save</button>
    </div>
    )
  }
}

export default App

添加功能正在更改时运行的问题。 真的不知道为什么。

有什么建议么？

Answer 1

将<button onClick={this.add(this.state.text)}>Save</button>为<button onClick={() => this.add(this.state.text)}>Save</button>

在您的变体函数中，在渲染组件时添加触发，并在使用输入的onChange调用setState时调用此重新渲染。

Answer 2

1. onChange()触发update()
2. update()调用this.setState()来更改状态。
3. 状态更改导致render()被调用以根据新状态重新渲染。
4. 渲染<button onClick={this.add(this.state.text)}>Save</button>每次运行render()都会调用add() 。

为了推迟调用add() ，您可以定义一个由click事件触发的函数，如另一个答案所示。 另外，您可以通过添加封装触发功能的类方法来实现相同的功能：

addText() {
  this.add(this.state.text)
}
render() { 
   …
   <button onClick={this.addText.bind(this)}>Save</button> 

这可能会或可能不会为您工作，但在给出的示例上下文中，这会工作。

Answer 3

问题是无论何时调用render()都将调用add(this.state.text) 。 为避免这种情况，您不需要将状态作为参数发送，您所要做的就是

<button onClick={this.add}>Save</button

或者如果您想发送参数，则应将其绑定

<button onClick={this.add.bind(this, this.state.text)}>Save</button>