React中的数字输入是字符串而不是整数

Question

我有一个反应组件.我从我的顶级组件传递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函数,因为添加更多功能,这可能吗？

Answer 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
});

Answer 2

您可以使用valueAsNumberInput 元素的属性

例如：

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

如果输入为空，e.target.valueAsNumber则将为您提供数字值NaN。

|| e.target.value如果valueAsNumber是 NaN ，则是后备。