javascript - 用户键入时 React js 输入无效(我想验证 onBlur 而不是 onChange)

Question

我遇到过这个问题好几次了，我正在寻找解决这个问题的“ react 方式”。

问题

用户输入时数字字段暂时无效。例如:“-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)发生在 parent 或祖 parent (并最终存储在服务器上)和编辑器的 props.number 更改中通过用户输入或来自服务器的刷新数据。这就是受控组件的原因。

方法#0

我尝试使用 onBlur 而不是 onChange，react 给了我这个警告:Warning: Failed form propType: You provided a 'value' prop to a form field without an 'onChange' handler.这将呈现一个只读字段。如果该字段应该是可变的，请使用“defaultValue”。否则，设置“onChange”或“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} />