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>