[解決済み] React JSでは、状態を直接変異させない、setState() react/no-direct-mutation-stateを使用する。

質問

<input
  defaultValue={this.props.str.name}
  ref={(input) => { this.state.name = input; }}
  name="name"
  type="text"
  className="form-control"
  onChange={this.handleInputChange}
/> 

handleInputChange(event) {
  this.setState({
    [event.target.name]: event.target.value
  });
}

if(this.state.name.value === "") {
  this.msg.show('Required fields can not be empty', {
    time: 2000,
    type: 'info',
    icon: <img src="img/avatars/info.png" role="presentation"/>
  });
}

そんな感じでデフォルト値を設定しようとしているのですが、それにアクセスしたいとも思っていました。私はこのように、値にアクセスするために this.state.name.value という警告が表示されます。

状態を直接変更しないで、setState()を使用してください。 react/no-direct-mutation-state .

どのように解決するのですか？

取得 "状態を直接変更しないでください、setState()を使用してください。

なぜなら、ノード参照を保存するためのrefコールバックメソッド内で、状態の値を変更しているからです。

this.state.name = input;

解決策

参照先を格納するためにステート変数を使用しないでください。 は、コンポーネントインスタンスに格納され、時間と共に変化しないためです。

の通りです。 DOC :

状態には、このコンポーネントに固有のデータが含まれ、変更される可能性があります。 を使用します。状態はユーザー定義であり、プレーンな JavaScriptのオブジェクトです。

render()で使用しないのであれば、stateに入れるべきではありません。たとえば 例えば、インスタンスに直接タイマーのIDを入れることができます。

を使用しているので 制御入力要素 のように、refは必要ありません。直接使用する this.state.name を入力要素の値プロパティとし this.state.name を使用して値にアクセスします。

これを使う。

<input
    value={this.state.name || ''}
    name="name"
    type="text"
    className="form-control"
    onChange={this.handleInputChange} 
/>

を使いたい場合は ref の場合、インスタンスに直接参照を格納し、value プロパティを削除することで onChange イベントも利用できます。

<input
    ref={el => this.el = el}
    defaultValue={this.props.str.name}
    name="name"
    type="text"
    className="form-control"
/> 

ここで、次のように使用します。 ref のように、値にアクセスすることができます。

this.el.value