Reactjsで入力フィールドをクリアしますか？

Question

私は以下の変数を使用しています。

var newInput = { 
    title: this.inputTitle.value, 
    entry: this.inputEntry.value  
}; 

これは入力欄で使用されます。

<input type="text" id="inputname" className="form-control" ref={el => this.inputTitle = el} /> 
    <textarea id="inputage" ref={el => this.inputEntry = el} className="form-control"></textarea> 
     <button className="btn btn-info" onClick={this.sendthru}>Add</button> 

有効にしたら{this.sendthru}入力フィールドをクリアしたいと思います。しかし、私はそうする方法が不明です。

また、この例に示すように、入力値にrefプロパティを使用する必要があることが指摘されました。私が明らかにしていないのは、正確には{el => this.inputEntry = el}という意味です。この状況でelの意義は何ですか？

Answer 1

「sendThru」機能の「this」バインディングを実行したとします。

以下の関数は、メソッドがトリガされたときに入力フィールドをクリアします。

sendThru() { 
    this.inputTitle.value = ""; 
    this.inputEntry.value = ""; 
} 

参考文献は、インライン関数式のように書くことができる：

ref={el => this.inputTitle = el} 

elコンポーネントを指します。

上記のようにrefが書かれている場合、Reactは、毎回、更新ごとに異なる関数オブジェクトを見るので、refはコンポーネントインスタンスで呼び出される直前にnullで呼び出されます。

詳しくはhereをご覧ください。

Answer 2

私は構文{el => this.inputEntry = el}は本当にわかりませんが、入力フィールドをクリアするときはあなたが言及したようにrefを割り当てます。 onClickの機能で次に

<input type="text" ref="someName" /> 

あなただけ使い、入力値を使用して終わった後

...

this.refs.someName.value = ''; 

編集

実は{エル=> this.inputEntry = el}は私が信じているのと同じです。多分誰かが私を訂正することができます。 elの値はどこかから渡されて、参照として機能する必要があります。

function (el) { 
    this.inputEntry = el; 
} 

Answer 3

inputタグ（すなわちvalue= {this.state.name}）のDeclare value属性に、あなたは、この入力をクリアしたい場合は、ご参考のためthis.setState({name : ''})

PFB動作するコードを使用する必要がありヴァーレ：あなたは少し広げるでし

<script type="text/babel"> 
    var StateComponent = React.createClass({ 
     resetName : function(event){ 
      this.setState({ 
       name : '' 
      }); 
     }, 
     render : function(){ 
      return (
       <div> 
        <input type="text" value= {this.state.name}/> 
        <button onClick={this.resetName}>Reset</button> 
       </div> 
      ) 
     } 
    }); 
    ReactDOM.render(<StateComponent/>, document.getElementById('app')); 
</script>