web-dev-qa-db-ja.com

イベントをsetStateコールバック関数に渡すにはどうすればよいですか？

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);                 
        }
    );
}
javascriptreactjscallbacksetstate
5
Frederik Petersen

値を抽出するか、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                
        }
    );
}
6
Shrroy

編集：間違った解決策

1つの解決策は、別の関数に参照を書き込むことです。

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

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

編集：

以下のFelixKingのコメントで指摘されているように、これはまったく解決策ではありません。状態が設定される前にhandleUpdate関数を実行し、目的を無効にします。実際の解決策は、Liamによって上記に投稿されています。

0
Frederik Petersen