React - 表单组件中状态的最佳实践？

Question

我正在尝试了解有关 React 组件状态的最佳实践。我开始通过编写如下 TextField 组件来创建表单

var TextField = React.createClass({
    render: function() {
        const {value, title, placeholder} = this.props;
        return (<div>
            {title}
            <input type="text"
                value={value}
                placeholder={placeholder}
                onChange={this.handleChange} />
        </div>);
    },

    handleChange (evt){
        this.props.onChange(evt.target.value);
    }
});

这是一个受控组件。因此，父容器必须通过 props 为输入传递一个值，并在发生更改时更改该值。这似乎是通常的方法。

当我想创建一个数字字段时，我的问题就出现了。对于此示例，假设我的数字字段将允许输入非数字字符（该字段不会验证）。我不喜欢在父项中验证该字段的想法，所以这就是我写的

var NumericField = React.createClass({

    getInitialState: function(){
        return{
            value : ""
        }
    },

    componentWillReceiveProps: function(nextProps) {
        if(this.validate(nextProps.value)){
            this.setState({value:nextProps.value});
        }
    },

    validate : function(input) {
        return !isNaN(input);
    },

    render: function() {
        const {value} = this.state;
        const {title} = this.props;
        return (<div>
            {title}
            <input type="text"
                value={value}
                onChange={this.handleChange} />
        </div>);
    },

    handleChange (evt){
        this.setState({value:evt.target.value});
        if(this.validate(evt.target.value)){
            this.props.onChange(evt.target.value);
        }
    }
});

这允许父级设置值并通过“value”道具更新它，但“onChange”道具只会在内容有效时触发。对我来说，感觉就像我为每个人使用了不同的模式，这并不好。不确定这是否是一种有效的感觉？

我想我只是想问一下我对数字字段的处理是否合理，或者是否有更好的模式可以遵循？

以防万一有人想知道我为什么希望数字字段以这种方式工作，我不知道，这只是一个简化的示例。更有效的示例是 json 的文本区域，仅当内容为有效 json 时才调用 onChange。

感谢任何反馈

Answer 1

通常不赞成通过传入 props 来设置状态。 道具应该是不可变的（比如你的 NumericField 组件的标题） 如果你想设置一个初始值，它应该来自控制器或存储父组件从中获取它，例如。

getInitialState() {
  return({
    value: FormDataStore.getInitialNumericFieldValue()
  });
}

之后，对值的任何更改都应由 NumericField 组件处理。如果您需要在设置新状态之前进行验证，例如。

handleChange(evt) {
  if (this.validate(evt.target.value)){
    this.setState({
      value: evt.target.value
    });
    /* You can also pass the new validated value
       up to the parent component to hold on to
       till you're ready to process the form*/
    this.props.onChange(evt.target.value);
  }
}

您的状态现在将只保留（随后父组件将只接收）最后验证的值，因此如果 this.state.value === 输入，您甚至可以显示有效/无效消息，但这是额外的

顺便说一下，您的 TextField 组件也应该遵循这种模式。将更改的值传递给父级只是为了让它再次作为道具传递下来，这违背了拥有子组件的目的。在这种情况下，我会将 JSX（和任何验证过程）全部放在父组件中，而不是抽象一个子组件。除非子组件可以重用。但是我还是让孩子处理自己的状态。