web-dev-qa-db-ja.com

onChangeリスナーを使用しても_ ​​Reactの入力値を変更できないのはなぜですか

私はReactにかなり慣れていないので、いくつかのチュートリアルを行った後、次のコードを試していました。

コンポーネントを1つ作成し、ストアから小道具をcomponentWillMountに渡して、コンポーネントの新しい状態を作成します。これまでレンダリングは問題ありません。

次に、stateを入力ボックスの値にバインドし、onChangeリスナーも持っています。それでも、フィールドの値を変更することはできません。

私はAngularバックグラウンドから来ているので、入力値を以下のような状態にバインドすると、nameオブジェクトのstateプロパティが自動的に更新されると想定しています。私はここで間違っていますか？

componentWillMount(){
    this.setState({
        updatable : false,
        name : this.props.name,
        status : this.props.status
    });
}

//relevant DOM from component's render function
<input className="form-control" type="text" value={this.state.name} id={'todoName' + this.props.id} onChange={this.onTodoChange.bind(this)}/>

onTodoChange(){
    console.log(this);
    //consoling 'this' here, shows old values only.
    //not sure how and even if I need to update state here.
    // Do I need to pass new state to this function from DOM
    //TODO: send new data to store
}

onTodoChange関数は、初期化中と同じ状態の値を持つthisの値をコンソールします。入力ボックスに入力して状態を変更し、ストアに送信できるようにする方法を教えてください。

javascriptreactjsstateonchange
24
Saurabh Tiwari

Angularの場合とは異なり、React.jsでは、状態を手動で更新する必要があります。次のようなことができます：

<input
    className="form-control"
    type="text" value={this.state.name}
    id={'todoName' + this.props.id}
    onChange={e => this.onTodoChange(e.target.value)}
/>

そして、関数内で：

onTodoChange(value){
        this.setState({
             name: value
        });
    }

また、コンポーネントのコンストラクターで初期状態を設定できます。

  constructor (props) {
    this.state = {
        updatable: false,
        name: props.name,
        status: props.status
    };
  }
41
César Landesa

上部の新しい関数を宣言せずに状態変数を単に変更したい場合は、インライン関数を介してショートカットを実行できます

<input type="text" onChange={e => this.setState({ text: e.target.value })}/>
12
Winston James Dale Fale

リアクションでは、状態またはプロップが変更された場合にのみ、コンポーネントが再レンダリング（または更新）されます。

この場合、コンポーネントが更新状態値で再レンダリングされるように、変更後すぐに状態を更新する必要があります。

onTodoChange(event){
           // update the state
          this.setState({name: event.target.value});
    }
1
StateLess

反応状態では、this.setState({});を使用して変更するまで変更されません。そのため、コンソールメッセージに古い値が表示されます

1
Rohan Veer

私はそれがあなたにとって最良の方法だと思います。

これを追加する必要があります "this.onTodoChange = this.onTodoChange.bind（this） '

関数にはイベントparam（e）があり、値を取得します

componentWillMount(){
        this.setState({
            updatable : false,
            name : this.props.name,
            status : this.props.status
        });
    this.onTodoChange = this.onTodoChange.bind(this)
    }


<input className="form-control" type="text" value={this.state.name} id={'todoName' + this.props.id} onChange={this.onTodoChange}/>

onTodoChange(e){
         const {name, value} = e.target;
        this.setState({[name]: value});

}
1
joshua.kim