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

小编典典

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

reactjs

在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);                 
        }
    );
}

阅读 318

2020-07-22

共1个答案

小编典典

您需要提取值或使用 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                
        }
    );
}

2020-07-22