セマンティックUIで入力テキストを事前入力する

Question

セマンティックUIのForm.InputまたはInputコンポーネントで事前定義された値をどのように反応させることができますか？私は、動作する小道具としてdefaultValue = "someVal"を渡そうとしました。しかし、それは小道具が変わると値を更新しません。私はprop value = "someVal"を渡そうとしましたが、そのフィールドを編集するアクセスをブロックしています。すべてのキーストロークは無視されます。基本的に行う方法がなければならない

また、componentWillReceivePropsがトリガされたときに値を更新する必要がありますか？ここ

は私が本質的で以下の入力をレンダリングAutoSaveInput.jsxを有する。これは https://react.semantic-ui.com/collections/form https://react.semantic-ui.com/elements/input

コントロールとして以下の入力を使用してフォームである

を使用している入力コンポーネントであります各キーストロークを自動的に保存するonChange（デバウンスを追加する必要があります）。

<Label basic>{this.props.label}</Label> 
<Form.Input 
          defaultValue={this.props.defaultValue} 
          disabled={this.props.disabled} 
          name={this.props.name} 
          onChange={this.onChange} 
          error={this.state.isDirty} 

          /> 

上記の入力は、最初は正常に機能します。しかし、新しい小道具が来ると、this.props.labelは正常に更新されますが、Form.Input値はまったく更新されません。代わりに、以前の値が表示されます。

また、これを以下に変更すると、値は新しい小道具で更新されますが、入力自体は入力できません。カーソルは入力の最後にジャンプするだけで、何も入力できません。

<Label basic>{this.props.label}</Label> 
<Form.Input 
          value={this.props.defaultValue} 
          disabled={this.props.disabled} 
          name={this.props.name} 
          onChange={this.onChange} 
          error={this.state.isDirty} 

          /> 

も小道具はvarが編集のために異なる形式のコンテンツでロードするものですクリックしをクリックしてReactRouter V4を介して、更新されています。

Answer 1

これは機能しています。 Form.Inputを描画し、value = {this.state.value}と{this.props.value}を渡したコンポーネントの状態で値を維持する必要がありました。