React-通过传递道具更改输入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

正如前面提到的，DefaultValue仅在表单的初始加载时设置。之后，它将不会得到“自然”更新，因为目的只是设置一个初始默认值。

如果需要，可以通过向包装器组件传递键来解决这个问题，就像在字段或app组件上一样，不过在更实际的情况下，它可能是表单组件。一个好的键将是传递给表单的资源的唯一值-例如，就像存储在数据库中的id一样。

在简化的情况下，您可以在字段呈现中这样做：

<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
}