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

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

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

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

这可能适用于您，也可能不适合您，但在给定的示例中，这将起作用。

Answer 3

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

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

或者如果你想发送一个你应该绑定它的参数

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

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

3 个答案: