我有以下反应成分：

var App = React.createClass({
    getInitialState: function() {
        return {value: 4.5}
    },
    change: function(event) {
        this.setState({value: parseFloat(event.target.value)});
    },
    render: function() {
        return <input type="number" value={this.state.value} onChange={this.change}/>;
    }
});

React.render(<App/>, document.body);

您可以在这里看到它：http://jsfiddle.net/2hauj2qg/

问题是,如果我想输入数字,例如：“ 4.7”.当用户输入“ 4.”时,由于转换为向后浮动,因此它变为“ 4”.但这会打断用户输入的内容.解决此问题的推荐方法是什么？

解决方法:

就像我所说的那样,这是因为您正在使用parseFloat

this.setState({value: parseFloat(event.target.value)});

相反,您可能希望只允许数字和小数.它会以字符串形式存储,并且永远不会更改其输入,但是会阻止他们键入字母和空格之类的内容.

var nonNumericRegex = /[^0-9.]+/g;

this.setState({value: event.target.value.replace(nonNumericRegex, "")});

要允许负数,您需要执行以下操作：

this.setState({
    value: event.target.value
        .replace(nonNumericRegex, "")
        .replace(/^(-.*?)-/g, "$1")
});

要强制使用前导美元符号且不超过两个小数,并且如果第一个字符(在$之后)是小数,则将其前缀为0.

this.setState({
    value: "$" + event.target.value
        .replace(nonNumericRegex, "")
        .replace(/(\.\d\d)\d+/g, "$1")
        .replace(/^\./g, "0.")
})