क्लिक ईवेंट के बाद साफ़ इनपुट टेक्स्ट

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 के साथ (जहां आप अपने जैसे मान सेट कर रहे हैं, आपके इनपुट के साथ हैं)। जब भी उपयोगकर्ता टेक्स्ट बदलता है (ऑनचेंज() ईवेंट के साथ) आपको मूल्य को अपडेट करने की आवश्यकता होती है।

मैंने JS fiddle here with your original code बनाया और आप देख सकते हैं कि आप इनपुट में मूल्य भी अपडेट नहीं कर सकते हैं। इसे अपडेट करने के लिए आपको onChange event like this JS fiddle के साथ ऑनब्लूर ईवेंट को प्रतिस्थापित करने की आवश्यकता है। उम्मीद है की वो मदद करदे!

Answer 2

यहाँ (https://facebook.github.io/react/docs/forms.html#controlled-components) उल्लेख किया है,

एक नियंत्रित एक मूल्य के आधार है। एक नियंत्रित प्रतिपादन मूल्य प्रोप के मूल्य को प्रतिबिंबित करेगा।

उपयोगकर्ता इनपुट का प्रतिपादन तत्व पर कोई प्रभाव नहीं पड़ेगा क्योंकि प्रतिक्रिया ने मूल्य को हैलो घोषित कर दिया है! उपयोगकर्ता इनपुट के जवाब में मान को अद्यतन करने के लिए, आप onChange घटना

आप या तो onChange को onBlur बदलने, या defaultValue बजाय value उपयोग करने की आवश्यकता इस्तेमाल कर सकते हैं। जैसे

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

Answer 3

होते ही आप राज्य चर का मान बदलने के लिए है, क्योंकि यह है कि क्या आप इनपुट प्रदान कर रहे हैं अगर आप यह तो नहीं बदलते हैं, इनपुट अभ्यस्त अद्यतन मूल्य दिखाने के रूप में आप इनपुट मूल्य टाइप कर रहे जरूरत । ऐसा करने के लिए आपको हर जगह ऑन चेंज इवेंट का उपयोग करने की आवश्यकता है।

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>