javascript - 在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函数，因为我不能再添加更多，这可能吗？

最佳答案

您可以检查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
});

关于javascript - 在React中，数字输入是字符串而不是整数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46447504/