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

Я нашел то, что кажется довольно хорошим решением этой проблемы: Используйте key опору, чтобы заставить отрисовку совершенно новый input.

В моем конкретном случае, я не нужен input, чтобы управлять своей собственной onChange реквизита, как form вокруг нее, в конечном счете контролирует государство в какой-то магазин, который заполнит defaultValue. Но состояние хранилища может быть асинхронно инициализировано/обновлено, и в этом случае необходимо обновить 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;