प्रतिक्रिया - गुजर रंगमंच की सामग्री से इनपुट DefaultValue बदलने

Question

इस उदाहरण पर विचार:

var Field = React.createClass({ 
    render: function() { 
     // never renders new value... 
     return (
      <div> 
       <input type="text" defaultValue={this.props.value || ''} /> 
      </div> 
     ); 
    } 
}); 

var App = React.createClass({ 
    getInitialState: function() { 
     return {value: 'Hello!'}; 
    }, 

    changeTo: function (str) { 
     this.setState({value: str}); 
    }, 

    render: function() { 
     return (
      <div> 
       <Field value={this.state.value} /> 
       <button onClick={this.changeTo.bind(null, 'Whyyyy?')}>Change to "Whyyyy?"</button> 
       <button onClick={this.changeTo.bind(null, void 0)}>Change to undefined</button> 
      </div> 
     ); 
    } 
}); 

React.render(
    <App />, 
    document.getElementById('app') 
); 

मैं गूंगा इनपुट घटक के आधार के रूप में defaultValue में मूल्य पास करना चाहते हैं। हालांकि यह इसे फिर से प्रस्तुत नहीं करता है।

Answer 1

मुझे काफी यकीन है कि इसे Controlled vs. Uncontrolled inputs के साथ करना है।

यदि मैं सही ढंग से समझता हूं, क्योंकि आपका <input> अनियंत्रित है (value विशेषता को परिभाषित नहीं करता है), तो मान हमेशा उस मान को हल करेगा जो इसे प्रारंभ किया गया है। इस मामले में Hello!।

इस समस्या को दूर करने के लिए, आप एक value विशेषता जोड़ सकते हैं और इसे सेट onChange दौरान:

var Field = React.createClass({ 
     render: function() { 
      // never renders new value... 
      return (
       <div> 
        <input type="text" defaultValue={this.props.default || ''} value={this.props.value} /> 
       </div> 
     ); 
     } 
    }); 

Here is a plunker परिवर्तन दिखा।

Answer 2

डिफ़ॉल्ट वैल्यू केवल आरंभिक लोड के लिए काम करता है। उसके बाद, यह अपडेट नहीं होगा। आप के लिए आप फील्ड घटक राज्य बनाए रखने की जरूरत:

var Field = React.createClass({ 
    //transfer props to state on load 
    getInitialState: function() { 
     return {value: this.props.value}; 
    }, 
    //if the parent component updates the prop, force re-render 
    componentWillReceiveProps: function(nextProps) { 
     this.setState({value: nextProps.value}); 
    }, 
    //re-render when input changes 
    _handleChange: function (e){ 
     this.setState({value: e.target.value}); 
    }, 
    render: function() { 
     // render based on state 
     return (
      <div> 
       <input type="text" onChange={this._handleChange} 
            value={this.state.value || ''} /> 
      </div> 
     ); 
    } 
}); 

Answer 3

मैं भी इस समस्या का सामना, क्या मैंने किया था मैन्युअल रूप से इनपुट मूल्य अद्यतन करने के लिए जब रंगमंच की सामग्री बदल गया है था। इसे अपने फील्ड रिएक्शन क्लास में जोड़ें:

componentWillReceiveProps(nextProps){ 
    if(nextProps.value != this.props.value) { 
     document.getElementById(<element_id>).value = nextProps.value 
    } 
} 

आपको बस अपने तत्व में एक आईडी विशेषता जोड़ने की आवश्यकता है ताकि यह स्थित हो सके।

Answer 4

यहां मुद्दा यह है:

onClick={this.changeTo.bind(null, 'Whyyyy?')} 

मैं तुम्हें क्यों शून्य करने के लिए बाध्य उत्सुक हूँ।

आप 'इस' से जुड़ना चाहते हैं, ताकि परिवर्तन इस ऑब्जेक्ट में सेट हो सके।

प्रयास करें इस

<button onClick={this.changeTo.bind(this, 'Whyyyy?')}>Change to "Whyyyy?"</button> 
<button onClick={this.changeTo.bind(this, void 0)}>Change to undefined</button> 

जावास्क्रिप्ट में, जब एक समारोह में कहा जाता है, इसकी गुंजाइश कहाँ से बुलाया गया था, नहीं जहां यह लिखा गया था (मुझे पता है, काउंटर सहज ज्ञान युक्त लगता है) में कहा जाता है। यह सुनिश्चित करने के लिए कि इसे संदर्भ में कहा जाता है, आप इसे लिखते हैं, आपको '.bind (this)' की आवश्यकता है।

बंधन और समारोह गुंजाइश के बारे में अधिक जानने के लिए, वहाँ ऑनलाइन tutes के बहुत सारे हैं, (कुछ ज्यादा दूसरों से बेहतर) - आपको पसंद आ सकते यह एक: http://ryanmorr.com/understanding-scope-and-context-in-javascript/

मैं भी प्रतिक्रिया देव उपकरण यदि आप कर रहे हैं उपयोग करने की अनुशंसा फ़ायरफ़ॉक्स या क्रोम, इस तरह से आपको लगता है कि state.message में बदलाव नहीं किया गया था देखने के लिए सक्षम हो गया होता का उपयोग कर: https://facebook.github.io/react/blog/2015/09/02/new-react-developer-tools.html

Answer 5

पिछले एक जवाब उल्लेख किया है, defaultValue केवल एक फार्म के लिए प्रारंभिक लोड पर सेट हो जाता है। इसके बाद, इसे "स्वाभाविक रूप से" अपडेट नहीं किया जाएगा क्योंकि इरादा केवल प्रारंभिक डिफ़ॉल्ट मान सेट करना था।

आप इस के आसपास मिल सकता है अगर आप, अपने Field या App घटक पर आवरण घटक के लिए एक key गुजर, की तरह से करने की जरूरत है, हालांकि अधिक व्यावहारिक परिस्थितियों में, यह शायद एक form घटक होगा। एक अच्छा key संसाधन के लिए पारित संसाधन के लिए एक अद्वितीय मूल्य होगा - उदाहरण के लिए डेटाबेस में संग्रहीत आईडी की तरह।

अपने सरलीकृत मामले में, आप अपने क्षेत्र में ऐसा कर सकता है प्रस्तुत करना:

<div key={this.props.value}> 
    <input type="text" defaultValue={this.props.value || ''} /> 
</div> 

एक अधिक जटिल रूप मामले में, कुछ इस तरह उदाहरण के लिए, अपने ऑनसबमिट कार्रवाई एक को प्रस्तुत करता है, तो आप क्या चाहते हैं मिल सकता है

const Form = ({item, onSubmit}) => { 
    return (
    <form onSubmit={onSubmit} key={item.id}> 
     <label> 
     First Name 
     <input type="text" name="firstName" defaultValue={item.firstName} /> 
     </label> 
     <label> 
     Last Name 
     <input type="text" name="lastName" defaultValue={item.lastName} /> 
     </label> 
     <button>Submit!</button> 
    </form> 
) 
} 

Form.defaultProps = { 
    item: {} 
} 

Form.propTypes = { 
    item: PropTypes.object, 
    onSubmit: PropTypes.func.isRequired 
} 

जब अनियंत्रित फ़ॉर्म इनपुट का उपयोग कर, हम आम तौर पर, जब तक के बाद उनके द्वारा जमा किये मूल्यों के बारे में परवाह नहीं है तो यही कारण है कि इसे और अधिक आदर्श करने के लिए केवल एक मजबूर है फिर से प्रस्तुत करना है जब: एपीआई लेकिन एक ही पृष्ठ पर रोक लगा दी आप वास्तव में डिफ़ॉल्ट वैल्यू अपडेट करना चाहते हैं (सबमिट करने के बाद, व्यक्तिगत इनपुट के हर बदलाव पर नहीं)।

यदि आप एक ही फॉर्म को संपादित कर रहे हैं और डरते हैं कि एपीआई प्रतिक्रिया अलग-अलग मानों के साथ वापस आ सकती है, तो आप आईडी प्लस टाइमस्टैम्प जैसे कुछ की संयुक्त कुंजी प्रदान कर सकते हैं।