在React中是否可以将外部事件传递给setState的回调函数?
例
someFunc(event) { this.setState( { value: event.target.value }, () => { this.props.onChange(event); // <- cannot pass to here } ); }
编辑:请参阅下面由利亚姆接受的解决方案以获得出色的答案,这是我的问题的具体解决方案:
解
someFunc(event) { event.persist() // <- add this line and event should pass without a problem this.setState( { value: event.target.value }, () => { this.props.onChange(event); } ); }
您需要提取值或使用 e.persist()
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>
或者,如果您要传递值状态,则可以在回调中使用this.state.value它将起作用。
someFunc(event) { this.setState( { value: event.target.value }, () => { this.props.onChange(this.state.value); // <- this should work } ); }