クリックイベント後の入力テキストのクリア

Question

問題は、初めてテキストを入力した後、[追加]をクリックして入力テキストボックスが消去される問題です。しかし、もう一度テキストを入力すると、入力テキストは最初の文字とは別のテキストを入力することはできません。なぜそれがこれをやっているのか分かりません。

var FormTextBox = React.createClass({ 
    handleOnBlur: function (e) { 
     this.props.onBlur(e.target.value); 
    }, 
    render: function() { 
     return (
      <input value={this.props.value} key={this.props.fid} type="text" onBlur={this.handleOnBlur} /> 
     ) 
    } 
}); 

var TestFormTextBox = React.createClass({ 
    getInitialState: function (e) { 
     return { 
      value: '' 
     } 
    }, 
    handleOnAdd: function (e) { 
     this.setState({ value: '' }); 
    }, 
    handleTextInfo: function (value) { 
     this.setState({ value: value }); 
    }, 
    render: function() { 
     return (
       <div> 
        <table> 
         <tbody> 
          <tr> 
           <td>Details</td> 
           <td></td> 
          </tr> 
          <tr> 
           <td><FormTextBox value={this.state.value} fid={1} onBlur={this.handleTextInfo} /></td> 
           <td><button onClick={this.handleOnAdd}>Add</button></td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 
     ) 
    } 
}); 

Answer 1

これは最初の動作でも驚いています。反応しているのはcontrolled componentsです（あなたの入力と同じように値を設定しています）。ユーザーがテキストを変更するたびに（onChange（）イベントを使用して）値を更新する必要があります。

私はJS fiddle here with your original codeを作成しました。あなたは入力の値を更新することさえできません。更新するには、onBlurイベントをonChange event like this JS fiddleに置き換える必要があります。希望が助けてくれる！

Answer 2

ここで述べたように（https://facebook.github.io/react/docs/forms.html#controlled-components）、

A制御値の支柱を有します。コントロールされたレンダリングは、値propの値を反映します。

Reactが値をHello！と宣言しているため、ユーザー入力はレンダリングされた要素に影響しません。ユーザの入力に応じて値を更新するには、onChangeイベントあなたがonChangeにonBlurを変更、またはdefaultValueの代わりvalueを使用するか必要

を使用することができます。例えば

<input defaultValue={this.props.value} key={this.props.fid} type="text" onBlur={this.handleOnBlur} /> 

Answer 3

は、あなたはそれはあなたがそれを変更しないでください入力は文句を言わない更新された値を示した場合、あなたが入力を提供しているものですので、あなたが入力値を入力しているとすぐに状態変数の値を変更する必要があります。これを行うには、どこでもonChangeイベントを使用する必要があります。

var FormTextBox = React.createClass({ 
 
    handleOnChange: function (e) { 
 
     this.props.onChange(e.target.value); 
 
    }, 
 
    render: function() { 
 
     return (
 
      <input value={this.props.value} key={this.props.fid} type="text" onChange={this.handleOnChange} /> 
 
     ) 
 
    } 
 
}); 
 

 
var TestFormTextBox = React.createClass({ 
 
    getInitialState: function (e) { 
 
     return { 
 
      value: '' 
 
     } 
 
    }, 
 
    handleOnAdd: function (e) { 
 
     this.setState({ value: '' }); 
 
    }, 
 
    handleTextInfo: function (value) { 
 
     this.setState({ value: value }); 
 
    }, 
 
    render: function() { 
 
     return (
 
       <div> 
 
        <table> 
 
         <tbody> 
 
          <tr> 
 
           <td>Details</td> 
 
           <td></td> 
 
          </tr> 
 
          <tr> 
 
           <td><FormTextBox value={this.state.value} fid={1} onChange={this.handleTextInfo} /></td> 
 
           <td><button onClick={this.handleOnAdd}>Add</button></td> 
 
          </tr> 
 
         </tbody> 
 
        </table> 
 
       </div> 
 
     ) 
 
    } 
 
}); 
 

 
ReactDOM.render(<TestFormTextBox />, document.getElementById('app'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script> 
 
<div id="app"></div>