数字输入在 React 中是字符串而不是整数答案

【问题标题】：Number input is string not integer in React数字输入在 React 中是字符串而不是整数
【发布时间】：2017-09-27 12:08:15
【问题描述】：

我有一个反应组件。我从我的顶级组件向下传递 updateInventory 函数。

class Inventory extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: this.props.name,
      price: this.props.price,
      id: this.props.id
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  render(props) {
    return (
      <form onSubmit={(e)=>this.props.updateInventory(e, this.state)}>
        <input name='name' value={this.state.name} onChange={this.handleChange} />
        <input name='price' type='number' value={this.state.price} onChange={this.handleChange} />
        <button type='submit'>Update</button>
      </form>
    )
  }
};

export default Inventory;

在我的顶级组件中：

updateInventory = (e, state) => {
  let pizzaState = this.state.pizzas;
  const index = pizzaState.findIndex((pizza)=>{
    return pizza.id === state.id;
  });
  Object.assign(pizzaState[index], state);
  console.log( pizzaState );
  e.preventDefault();
};

到目前为止，这似乎有效（我还没有更新我的顶级状态）但我可以看到，当我更新价格时，新值是一个字符串而不是整数。我希望只有一个 handleChange 函数用于我的所有输入，因为我会添加更多，这可能吗？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您可以检查target的类型和名称并相应地处理该值。

举例

this.setState({
  [e.target.name]: e.target.type === 'number' ? parseInt(e.target.value) : e.target.value
});

// or

this.setState({
  [e.target.name]: e.target.name === 'price' ? parseFloat(e.target.value) : e.target.value
});

【讨论】：

谢谢兄弟，这是最好的！

【解决方案2】：

您可以使用 Input 元素的valueAsNumber 属性

例如：

handleChange(e) {
    this.setState({
        [e.target.name]: e.target.valueAsNumber || e.target.value
    });
}

e.target.valueAsNumber 将为您提供数字值或NaN（如果输入为空）。

|| e.target.value 是在 valueAsNumber 为 NaN 的情况下的后备。

【讨论】：

这种方法有问题，当用户输入000时，它会变成“000”的字符串

【解决方案3】：

onChange 中的parseFloat 将不起作用，因为4. 将被解析为4，并且用户将无法键入任何新数字。检查 react-input-number 是否在反应中输入数字。

【讨论】：