リアクションでコントロールされていないフィールドをクリアする方法

Question

私はフォームのrefを使用していましたが、今は常にフォームについて述べています。ユーザーが何かを投稿した後にフィールドをクリアする必要があります。

handleSumbit = (e) => { 
     e.preventDefault() 
     const todoText = this.state.todoText 
     if(todoText.length > 0){ 
      this.refs.todoTextElem = "" // wont work 
      this.props.onAddTodo(todoText) 
     } else { 
      this.refs.todoTextElem.focus() //worked 
     } 
    } 

    render() { 
     return(
      <div> 
       <form onSubmit={this.handleSumbit}> 
        <input ref="todoTextElem" type="text" onChange={e => this.setState({todoText: e.target.value})} name="todoText" placeholder="What do you need to do?" /> 
        <button className="button expanded">Add Todo</button> 
       </form> 
      </div> 
     ) 
    } 

refをクリアすることは、制御された入力であるため動作しません。

フォームが送信されたことを伝える親コンポーネントからフラグを渡した後、setStateを使用して入力をクリアすると、私は何か愚かなことをしたくありません。それとも私が

this.props.onAddTodo(todoText).then(()=>this.state({todoText:""})) 

Answer 1

を行うことができるようにonAddTodoがコールバックを持って作るあなたはvalueプロパティを使用していないので、入力要素は、uncontrolledで使用している方法は、それが価値だ制御していないことを意味します。値を状態変数に格納するだけです。あなたがDOM elementの参照を持つことになりますref、refを使用している場合は、その要素の値にアクセスするためにthis.refName.valueを使用する必要があるので、

---

あなたは、状態変数内の入力フィールドの値を格納する必要はありません。

ステップ：this.todoTextElem.value

2 -明らかに制御されていない入力：それは値です取得するには

<input 
    ref= {el => this.todoTextElem = el} 
    type="text" 
    placeholder="What do you need to do?" /> 

：

の1-このような入力要素を書きますフィールドは、を使用して値を消去します：

this.todoTextElem.value = ''; 

このようにそれを書く：

handleSumbit = (e) => { 
    e.preventDefault() 
    const todoText = this.todoTextElem.value; 
    if(todoText.length > 0){ 

     this.todoTextElem.value = '';  //here 

     this.props.onAddTodo(todoText) 
    } else { 
     this.todoTextElem.focus() 
    } 
} 

もう一つの変化は、string refs, As per DOCについてです：あなたが働いている場合

は前に反応して、あなたはそれ以上の年齢に精通しているかもしれません ref属性が "textInput"のような文字列で、DOM ノードがthis.refs.tとしてアクセスされるAPI extInput。 文字列リファレンスにはいくつかの問題があり、従来と見なされており、将来リリースのいずれかで が削除される可能性があるため、それに反対することをお勧めします。現在 this.refs.textInputを使用して参照情報にアクセスしている場合は、代わりに というコールバックパターンをお勧めします。

Answer 2

代わりに機能参照を使用してください。 refはDOM要素に対して行われます。つまり、要素を直接上書きしようとするのではなく、そのプロパティ（.value）を修正する必要があります。 次は動作するはずです：

handleSumbit = (e) => { 
    e.preventDefault() 
    const todoText = this.state.todoText 
    if(todoText.length > 0){ 
     this.todoTextElem.value = "" 
     this.props.onAddTodo(todoText) 
    } else { 
     this.todoTextElem.focus() 
    } 
} 

render() { 
    return(
     <div> 
      <form onSubmit={this.handleSumbit}> 
       <input ref={input => this.todoTextElem = input} type="text" onChange={e => this.setState({todoText: e.target.value})} name="todoText" placeholder="What do you need to do?" /> 
       <button className="button expanded">Add Todo</button> 
      </form> 
     </div> 
    ) 
}