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

Question

Have been playing around with react. Have two event listeners the input which listens onChange and the button which should push the value to the array when its clicked.

Here's the code:

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

The problem that the add function is running on change. Can't really get why.

Any suggestions?

Answer 1

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

In your variant function add firing when component is rendering, and when you call setState with onChange of input you call this re-render.

Answer 2

1. onChange() triggers update()
2. update() calls this.setState() which changes state.
3. A state change causes render() to be invoked to re-render according to new state.
4. Rendering <button onClick={this.add(this.state.text)}>Save</button> invokes add() every time render() runs.

In order to defer invoking add() , you can define a function which gets triggered by the click event, as was shown in another answer. Alternatively, you can achieve the same functionality by adding a class method which encapsulates the trigger functionality:

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

This may or may not work for you, but in the context of the example, given, this would work.

Answer 3

The problem is add(this.state.text) is called whenever render() is called. To avoid this, you do not need to send the state as parameter, all you need to do is

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

or if you want to send a parameter you should bind it

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