为什么我的输入值没有用 React 更新？

我的组件中有以下代码。当我更新某些内容时，它会被调用，从而替换 UI 中的一堆内容。除了用户看到的输入值之外，所有内容都在更新。

let input = {
  id: 'discount-' + geo + '-' + segment,
  value: percentage,
  disabled: applyToAll,
  placeholder: '0.00'
};

cells.push(
  <td key={'cell-' + geo + '-' + segment} className="discount-segment cfix">
    <Text {...input} />
  </td>
);

这是什么<Text>返回，为了清晰起见，删除了一些内容

return (
  <div className={containerClasses.join(' ')} id={'field-container-' + id}>
    {label}
    <input
      autoComplete="off"
      type="text"
      id={id}
      ref="input"
      {...extraProps}
      name={id}
      className={classes.join(' ')}
      defaultValue={this.props.value}
      onChange={this.props.onChange}
      />
  </div>
);

一切都渲染得很好。让我们说percentage值为5启动时，它会显示5在该领域。然后我做一些其他更新的事情percentage到 50。（控制台日志将在重新渲染时显示正确的数字）。然而该值仅显示5仍然在用户界面中。我在用defaultValue在输入字段上，但我认为随着整个事情从父级重新渲染，这应该会改变。

Edit更新<Text> to set value代替defaultValue。但是我需要使用state当用户键入时更新值。然后，当我重新渲染时，我会发送具有适当值的新道具，但道具当然不会更新。对我来说，第22条军规。

您需要执行几个步骤：

1. 您的输入需要only使用value and onChange道具，请勿使用defaultValue
2. 使用 props 初始化你的状态来设置默认值
3. 当你的 props 改变时更新你的状态

因此，例如：

const MyComponent = React.createClass({

  propTypes: {
    defaultInputValue: React.PropTypes.string
  },

  getInitialState() {
    return {
      inputValue: this.props.defaultInputValue
    };
  },

  componentWillReceiveProps(nextProps) {
    if (nextProps.defaultInputValue !== this.props.inputValue) {
      //Forcibly overwrite input value to new default if the default ever changes
      this.setState({inputValue: nextProps.defaultInputValue});
    }
  },

  render() {
    return <input type="text"
                  value={this.state.inputValue}
                  onChange={e => this.setState({inputValue: e.target.value})} />;
  }
});

一般来说，关闭 props 的初始化状态是一个禁忌。如果我在代码审查中看到这种情况，我可能会有点畏缩，因为可能有一些行为可以简化。

您还可以这样做：

<input value={this.state.inputValue || this.props.defaultInputValue} />

这样，如果您清除了输入，输入的值将恢复为 prop 值。在这种情况下，您不必用新的 props 强制覆盖状态。