入力フィールド値をプログラムで入力してReact？

Question

私はいくつかの入力フィールドを持つモーダルを持っています。私は簡単しかし

@observable categoryValue; 
@action handleCategoryChange = (e, data) => { 
    this.categoryValue = data.value; 
    e.preventDefault(); 
}; 

（irellevantただし、mobxストアを使用）..

<Input onChange={this.props.store.handleCategoryChange} type="text" /> 

として、入力フィールドにonChange関数を使用して、入力を入力するユーザに自動的にデータを渡すことができユーザーがアプリケーション内の他の場所に情報をあらかじめ入力できる機能を追加したいと考えています。入力フィールドをあらかじめ入力するデータがありますが、実際に入力するのではなく、プログラムで入力する方法はわかりません。

上記のhandleCategoryChange関数を呼び出す必要があります。しかし、私の変数はdata.valueと等しくなります。これは問題を提示します！自分自身で変数を渡すので、イベントeもdata.valueという値もないので、この関数を自分で呼び出すことはできません。

変数を使用してReactで入力フィールドを自動的にプログラムで自動的に入力する正しい方法は何ですか？私は何とかonChange機能を起動する必要がありますが、入力値が異なることになる。..

Answer 1

使用controlled componentこのような状況のため、このようなinput elementのvalueプロパティ定義：あなたはその変数を更新するたび

<Input value={variable_name} .... 

を自動的にその値が入力要素に取り込まれます。

variable_nameに値を割り当てて、デフォルト値を入力すると、ユーザーはその値をonChange関数で更新できます。 DOC 1として

：

値がこのよう で反応することによって制御される「制御要素」と呼ばれる入力フォーム要素。

Answer 2

制御されたコンポーネントを使用してその値を渡すことができます。

<input type="text" value{this.state.value} 
     onChange={()=> {this.setState({value:e.target.value })}} 

Answer 3

<input type="text" value{this.state.value} onChange={(e) => {this.setState({value:e.target.value })}/>