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

我试图了解有关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);
    }
});

var TextField=React.createClass({
render:function（）{
const{value，title，placeholder}=this.props；
返回(
{title}
);
},
手柄更换（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);
        }
    }
});

var NumericField=React.createClass({
getInitialState:函数（）{
返回{
值：“”
}
},
组件将接收道具：函数（下一步）{
if（this.validate（nextrops.value））{
this.setState（{value:nextrops.value}）；
}
},
验证：功能（输入）{
返回！isNaN（输入）；
},
render:function（）{
const{value}=this.state；
const{title}=this.props；
返回(
{title}
);
},
手柄更换（evt）{
this.setState（{value:evt.target.value}）；
if（this.validate（evt.target.value））{
this.props.onChange（evt.target.value）；
}
}
});

这允许父级设置值并通过“value”属性更新它，但“onChange”属性仅在内容有效时才会触发。我觉得我对每一个都使用了不同的模式，这不好。不确定这是不是一种合理的感觉

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

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

---

欣赏任何反馈

通常不赞成通过传递道具来设置状态。 道具应该是不可变的（如数字字段组件的标题） 如果您想设置初始值，它应该来自控制器或存储父组件获取它的来源，例如

getInitialState（）{
返回({
值：FormDataStore.getInitialNumericFieldValue（）
});
}

谢谢X-Fix，这一切都是有道理的，我认为您关于文本字段用途的权利有点毫无意义。但是，如果整个表单的状态在树上发生更改，我希望表单组件进行更新。我四处寻找，发现了这个用于表单构建的库，请注意表单数据是如何在表单内部和外部进行更改的。Ben免责声明：我更熟悉将Flux与React（单向数据流）结合使用。我的方法是将数据保存在（例如）FormDataStore中，然后来自第一个组件的handleChange函数将更改（成功验证后）直接保存到存储中。对于Flux，您可以使用动作创建者和调度程序来执行此操作。然后存储发出一个“更改”事件，第二个组件（表单外部）获取更新的值和更改以反映这一点，反之亦然form@Ben我还应该提到，通过这种方式，子组件不再存储/操作状态对象，并且可以通过父组件传入的道具设置其字段值。然后，当商店发出“更改”事件时，家长会更新其数据。谢谢，这听起来很合理。我研究了flux，认为它可能有助于提供更好的解决方案。我想这是我接下来要探索的方向，只是想先了解一下我的基本知识。非常感谢你的帮助，谢谢。