用户类型时，React js输入无效（我想验证onBlur而不是onChange）

Question

我已经遇到过几次这个问题，我正在寻找解决问题的“反应方式”。

问题

用户输入时，数字字段暂时无效。例如：“-45”为“-”，“ 2.3”为“ 2”。最简单的验证示例就是对值进行parseFloat。这是一个工作示例：http : //jsfiddle.net/h55kruca/6/。我正在寻找一种验证onBlur而不是onChange的方法，或者类似的方法来实现这一点。

这是示例中的JS：

var App = React.createClass({
    getInitialState: function() {
        return {number: 0}
    },    
    handleNumberChange: function(e) {
        var val = parseFloat(e.target.value);
        this.setState({number: val});
    },
    render: function() {
        return (
            <Editor number={this.state.number}
                    onNumberChange={this.handleNumberChange}
            />
        );
    }
});

var Editor = React.createClass({
    render: function() {
        return (
            <form className="reactForm" >
                <input type='text'
                       value={this.props.number}
                       onChange={this.props.onNumberChange} />
                <span>{this.props.number}</span>
            </form>
        );
    }
});

请注意，验证（parseFloat在这种情况下）发生在父母或祖父母（最终存储在服务器中）中，并且编辑器的props.number更改是通过用户输入或来自服务器的刷新数据进行的。 这就是组件受控的原因。

方法＃0

我尝试使用onBlur而不是onChange，并且反应给了我这个警告： Warning: Failed form propType: You provided a 'value' prop to a form field without an 'onChange' handler. This will render a read-only field. If the field should be mutable use 'defaultValue'. Otherwise, set either 'onChange' or 'readOnly'.

方法1

存储一个实际上是字符串的临时“数字”状态。直到onBlur为止，无论用户输入什么，都可以使用它。我不喜欢这样，因为实现如此简单的内容需要大量的代码。我可能最终会在每个输入元素周围创建一个包装器（这对我来说是痛苦的）。

方法＃2

将输入包装在使用shouldComponentUpdate停止更新直到onBlur的组件中。这再次需要对每个输入进行包装。

方法3

取出，使输入成为不受控制的组件value=。我还没有完全考虑到这一点，但是我想我很快就会错过受控组件的功能。如果有一种方法可以在受控和不受控制的onFocus和onBlur之间切换，那也许就是我的答案。

您的解决方案

必须有一种简单的方法来解决这个问题，或者至少是React社区中正在开发的东西，我什么都找不到。您如何解决这个问题？

Answer 1

要验证onBlur您可以更改您的输入：

<input type='text' value={this.state.number} onChange={this.handleNumberChange} />

对此：

<input type='text' onBlur={this.handleNumberChange} />