Tıklama etkinliğinden sonra giriş metnini temizle

Question

Kullanmakta olduğum sorun, ilk kez metin girdikten sonra Ekle'yi tıklatıp giriş metni kutusu temizleniyor. Yine de metin girmeye başladığımda, giriş metni ilk harften başka bir metin girmeme izin vermeyecektir. Bunu neden yaptığından emin değilim.

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

ben bu bile ilk kez çalışır şaşırıyorum. Reaksiyonda controlled components ile (sizin girdinizle aynı değeri ayarladığınız yer). Kullanıcı metni değiştirdiğinde (onChange() olayıyla) değeri güncellemeniz gerekir.

JS fiddle here with your original code yaptım ve girişteki değeri bile güncelleyemediğinizi görebilirsiniz. Güncellemeyi alabilmek için onBlur etkinliğini bir onChange event like this JS fiddle ile değiştirmeniz gerekir. Umarım yardımcı olur! Kontrollü bir

burada ( https://facebook.github.io/react/docs/forms.html#controlled-components) belirtildiği gibi

Answer 2

,

bir değer pervane vardır. Kontrollü bir işlem, değer aktarımının değerini yansıtır.

Reaktif, Hello! Değerini bildirdiği için kullanıcı girdisinin işlenen öğe üzerinde hiçbir etkisi olmayacaktır. kullanıcı girişine cevaben değerini güncellemek için, değiştiğinde olay Sen onChange için onBlur değiştirebilir veya defaultValue yerine value kullanmak için her ihtiyaç

kullanabilirsiniz. Örneğin.

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

Answer 3

Bunu daha sonra değiştirmemesi girdi alışkanlık güncellenmiş değeri göstermek eğer girdi sağlayan budur çünkü giriş değeri yazdığınız en kısa sürede devlet değişkenin değerini değiştirmek gerekir . Bunu yapmak için onChange olayını her yerde kullanmanız gerekir.

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>