web-dev-qa-db-ja.com

React入力テキストフィールドをonBlurイベントの値で更新する

次のような入力フィールドがあります。ぼかしでは、関数はサービスを呼び出してサーバーへの入力値を更新し、それが完了すると入力フィールドを更新します。

どうすればそれを機能させることができますか？なぜフィールドを変更できないのか理解できますが、それを機能させるにはどうすればよいですか？

これらのフィールドを他のフィールドに変更するため、defaultValueは使用できません。

<input value={this.props.inputValue} onBlur={this.props.actions.updateInput} />

javascriptreactjsonblur
18
Suthan Bala

入力値を編集可能にするには、値を更新するonChangeハンドラーが必要です。また、onBlur関数を呼び出したいので、onBlur={() => this.props.actions.updateInput()}のようにバインドする必要があります

componentDidMount() {
   this.setState({inputValue: this.props.inputValue});
}
handleChange = (e) => {
  this.setState({inputValue: e.target.value});
}

<input value={this.state.inputValue} onChange={this.handlechange} onBlur={() => this.props.actions.updateInput(this.state.inputValue)} />
29
Shubham Khatri

これを行う方法：

  1. valueプロパティをinput fieldに割り当てないでください。onblurメソッドがトリガーを取得するたびに、次のようにAPIをヒットします。

    <input placeholder='abc' onBlur={(e)=>this.props.actions.updateInput(e.target.value)} />

サーバーの値を更新します。

updateInput(value){
    /*update the value to server*/
}

  1. this.props.inputValueによってvalueフィールドにinputフィールドを割り当てる場合は、onChangeメソッドを使用し、値を親コンポーネントに戻し、inputValueを変更します。親でsetStateを使用すると、次のように機能します。

    <input value={this.props.inputValue} onChange={(e)=>this.props.onChange(e.target.value)} onBlur={()=>this.props.actions.updateInput} />

親コンポーネント内：

onChange(value){
    this.setState({inputvalue:value});
}

サーバーの値を更新します。

updateInput(value){
    /*update the value to server*/
}
10
Mayank Shukla

OnChangeイベントをバインドして、状態を更新します。 onChangeイベントハンドラーメソッド内で 'this'コンテキストが失われないように、コンストラクターでbindメソッドを必ず使用してください。次に、値を更新入力メソッドonBlurに戻します。このようなもの：

constructor(props) {
  super(props);

  this.state = {
    inputValue: props.inputValue
  };
  this.handleChange = this.handleChange.bind(this);
};

handleChange = (e) => {
  this.setState({inputValue: e.target.value});
}

<input 
  value={this.state.inputValue}
  onChange={this.handleChange}
  onBlur={() => this.props.actions.updateInput(this.state.inputValue)} 
/>
5
MDiesel