DefaultValue परिवर्तन नहीं फिर से प्रस्तुत करना है इनपुट

Question

मुझे पता नहीं क्यों इस

Demo

मैं निम्नलिखित ES6 कोड

const {createFactory, createClass, DOM: { label, input, button }} = React; 

const tester = createFactory(createClass({ 
    render() { 
     return label({} 
       ,`Name: ${this.props.name}` 
       ,input({defaultValue: this.props.name}) 
       ,button({onClick: this.changeName}, "Change") 
      ) 
    }, 
    changeName() { 
    this.setProps({name: "Wilma"}) 
    } 
})) 

React.render(tester({name: "Fred"}), document.querySelector('body')) 

क्लिक करने से बटन स्पष्ट रूप से रंगमंच की सामग्री में परिवर्तन किया है काम नहीं कर रहा है, लेकिन पुराने defaultValue अभी भी इनपुट में है! तो क्या देता है? मैं क्या गलत कर रहा हूं? क्या यह एक बग है? क्या आसपास कोई काम है?

Answer 1

आप केवल अपना डिफ़ॉल्ट मान निर्दिष्ट करते हैं, लेकिन इसे अपने मूल्य को प्रोप में बदलने के साथ न बदलें।

,input({value: this.props.name}) 

जब यह .props.name बदलता है तो मान बदल जाएगा।

http://output.jsbin.com/melitecimo

Answer 2

मैंने पाया है कि इस के लिए एक बहुत अच्छा समाधान लगता है: पूरी तरह से नया input का प्रतिपादन के लिए मजबूर करने key प्रोप का प्रयोग करें।

मेरी विशेष मामले में, मैं input, अपने स्वयं के onChange प्रोप साथ नियंत्रित किया जा करने के लिए आसपास के यह अंततः कुछ दुकान जो defaultValue भरता भीतर राज्य को नियंत्रित करता है form के रूप में की जरूरत नहीं है। लेकिन स्टोर का राज्य असीमित रूप से प्रारंभ/अद्यतन हो सकता है, और इस स्थिति में defaultValue अपडेट किया जाना चाहिए। तो यहाँ मेरी विशेष मामले के एक संक्षिप्त संस्करण है:

import React, { PropTypes } from 'react'; 
import { Form } from 'provide-page'; 

const GatherContact = ({ 
    classes, 
    onSubmit, 
    movingContactName, 
    movingContactEmail, 
    movingContactPhone, 
    userName, 
    userEmail, 
    userPhone 
}) => (
    <Form onSubmit={onSubmit}> 
    <div className={classes.GatherContact}> 
     <h2 className={classes.GatherHeading}> 
     How can we contact you? 
     </h2> 

     <input 
     type="text" 
     className={classes.GatherContactInput} 
     placeholder="Name" 
     name="movingContactName" 
     key={`movingContactName:${movingContactName || userName}`} 
     defaultValue={movingContactName || userName} 
     required={true} 
     /> 

     <input 
     type="email" 
     className={classes.GatherContactInput} 
     placeholder="Email" 
     name="movingContactEmail" 
     key={`movingContactEmail:${movingContactEmail || userEmail}`} 
     defaultValue={movingContactEmail || userEmail} 
     required={true} 
     /> 

     <input 
     type="tel" 
     className={classes.GatherContactInput} 
     placeholder="Phone" 
     name="movingContactPhone" 
     key={`movingContactPhone:${movingContactPhone || userPhone}`} 
     defaultValue={movingContactPhone || userPhone} 
     required={true} 
     /> 

     {userName 
     ? undefined 
     : (
      <input 
      type="password" 
      className={classes.GatherContactInput} 
      placeholder="Password" 
      name="userPassword" 
      required={true} 
      autoComplete="new-password" 
      /> 
     ) 
     } 
    </div> 
    </Form> 
); 

GatherContact.propTypes = { 
    classes: PropTypes.object.isRequired, 
    onSubmit: PropTypes.func.isRequired, 
    movingContactName: PropTypes.string.isRequired, 
    movingContactEmail: PropTypes.string.isRequired, 
    movingContactPhone: PropTypes.string.isRequired, 
    userName: PropTypes.string.isRequired, 
    userEmail: PropTypes.string.isRequired, 
    userPhone: PropTypes.string.isRequired 
}; 

export default GatherContact;