如何将事件传递给setState回调函数？

Question

如何将事件传递给setState回调函数？

6

在React中，是否可能将外部事件传递给setState的回调函数？

例子：

someFunc(event) { 
    this.setState(
        {
            value: event.target.value
        },
        () => {                 
            this.props.onChange(event);    // <- cannot pass to here                
        }
    );
}

编辑：请查看Liam的优秀答案，下面是我问题的具体解决方案：

解决方案

someFunc(event) { 
    event.persist() // <- add this line and event should pass without a problem
    this.setState(
        {
            value: event.target.value
        },
        () => {                 
            this.props.onChange(event);                 
        }
    );
}

- Frederik Petersen

我自己找到了一个解决方案，但如果有人有更好的解决方案，我会将其标记为被接受的答案。 - Frederik Petersen

1

“setState回调函数能否接收外部参数？”所有JavaScript函数在不论使用哪个框架或库时都是一样的。这里具体问题是React如何管理其事件对象。 - Felix Kling

2个回答

0

编辑：错误解决方案

一个解决方法是编写另一个函数并引用它，例如：

updateInput(e) {
    this.setState(
        {
            value: e.target.value
        },
        this.handleUpdate(e)
    );
 }

handleUpdate(e) {
    this.props.onChange(e, this.props.tag);
}

编辑：

正如Felix King在下面的评论中指出的那样，这根本不是一个解决方案。它将在状态设置之前运行handleUpdate函数，这违背了初衷。真正的解决方案由Liam发布在上面。

- Frederik Petersen

2

这段代码并不是你想的那样。它在状态更新之前立即调用了this.handleUpdate。这与执行this.handleUpdate(e); this.setState(...);相同。 - Felix Kling

在这一点上我同意@FelixKling的看法。你必须从handleUpdate函数中返回一个新函数。否则它会立即执行该函数并将函数的结果作为回调传递（在你的情况下，它返回undefined因为它没有返回任何东西）。 - user3210641

1

谢谢您指出来。我会进行编辑，并将其作为“不要这样做”的解决方案，以防其他人也遇到类似情况。 - Frederik Petersen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Liam · Accepted Answer

你需要提取值或使用 e.persist()。 https://reactjs.org/docs/events.html#event-pooling

class App extends React.Component {

something = (value) =>{
  {console.log(value, 'coming from child')}
}
  render() {

    return (
      <div >
        <Hello text={this.something} />
      </div>
    );
  }
}


class Hello extends React.Component {

  constructor() {
    super()
    this.state = {
      value: ''
    }
  }
  onChange = (e) => {
    const value = e.target.value;
    this.setState({ value }, () => {
    
      this.props.text(value)
    })
  }
  render() {

    return (
      <div style={{ padding: 24 }}>
        <input onChange={this.onChange} value={this.state.value} />

      </div>
    );
  }
}



ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='root' ></div>

或者，如果你想传递state的值，你可以在回调函数中使用this.state.value。

someFunc(event) { 
    this.setState(
        {
            value: event.target.value
        },
        () => {                 
            this.props.onChange(this.state.value);    // <- this should work                
        }
    );
}