小编scm*_*cms的帖子

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

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

问题

用户输入时，数字字段暂时无效。例如：“-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>
        );
    }
});

Run Code Online (Sandbox Code Playgroud)

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