Question

我有以下反应组件：

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”。但这会中断用户输入的内容。解决这个问题的推荐方法是什么？

Answer 1

正如我所提到的那样，因为你正在使用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.")
})

Answer 2

删除parseFloat并且您的字符串不会转换为数字？

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

http://jsfiddle.net/2hauj2qg/1/

Answer 3

如果对数字做任何事情都没有意义，直到他们完成输入并且您按照标准方式提出事件来指示更改的数据，您可以通过以下方式完成此操作：< / p>

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

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

在这个孤立的例子中，它没有多大意义，但如果你假设某人正在使用MyComponent并且他们给它一个onChange回调，那么这很好用。您可以获得原生输入控件的好处，但仍然（通过回调）将数字作为实际浮动返回。

Answer 4

如何编写一个处理字符串值的小组件并将合法的浮点值传递给侦听器呢？

class NumberInput extends React.Component<{ onChange: (n: number) => void, value: number }, { value: number }> {

  constructor(props: { onChange: ((n: number) => void); value: number }, context: any) {
    super(props, context);
    this.state = {
      value: props.value || 0
    };
  }

  handleInputChange = (e) => {
    const value = e.target.value;
    this.setState({
      value: value
    });
    if (this.props.onChange) {
      const floatValue = parseFloat(value);
      if (!isNaN(floatValue)) {
        this.props.onChange(floatValue)
      }
    }
  };

  componentWillReceiveProps(newProps) {
    this.setState({
      value: newProps.value
    })
  }

  render() {
    return (
      <Input step="0.1" value={this.state.value} onChange={this.handleInputChange} type="number"/>
    )
  }
}

反应组件和无效输入

4 个答案: