javascript - 在 React 中，数字输入是字符串而不是整数

Question

我有一个 React 组件。我从我的顶级组件向下传递 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

您可以检查目标的类型和名称，并相应地处理值。

例如

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