javascript - react 组件和无效输入

Question

我有以下 react 组件:

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.”时，由于在后面转换为 float ，它变为“4”。但这会打断用户正在输入的内容。解决此问题的推荐方法是什么？

Answer 1

正如 imjared 提到的，这是因为你正在使用 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.")
})