javascript 数字输入在 React 中是字符串而不是整数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46447504/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Number input is string not integer in React
提问by Evanss
I have a react component. Im passing the updateInventory function down from my top level component.
我有一个反应组件。我从我的顶级组件向下传递 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;
In my top level component:
在我的顶级组件中：
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();
};
This appears to be working so far (I havn't updated my top level state yet) but I can see that when I update the price the new value is a string not an integer. I was hoping to just have the one handleChange function for all my inputs as ill be adding some more, is this possible?
到目前为止，这似乎有效（我还没有更新我的顶级状态）但是我可以看到，当我更新价格时，新值是一个字符串而不是整数。我希望我的所有输入都只有一个 handleChange 函数，因为我会添加更多，这可能吗？
回答by bennygenel
You can check the type and name of the targetand handle the value accordingly.
您可以检查 的类型和名称target并相应地处理该值。
For Example
例如
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
});
回答by udidu
You can use valueAsNumberproperty of the Input element
您可以使用valueAsNumberInput 元素的属性
For example:
例如：
handleChange(e) {
this.setState({
[e.target.name]: e.target.valueAsNumber || e.target.value
});
}
The e.target.valueAsNumberwill give you the value as number or NaNif the input is empty.
如果输入为空，e.target.valueAsNumber则将为您提供数字值NaN。
The || e.target.valueis a fallback in case the valueAsNumberis NaN.
|| e.target.value如果valueAsNumber是 NaN ，则是后备。
回答by zuo
The parseFloatin onChangewont work since 4.will be parsed as 4and the user wont be able to type any new digits. Check react-input-numberfor numeric input in react.
在parseFloat中onChange不会工作，因为4.会被解析为4，并且用户将无法键入任何新的数字。在反应中检查数字输入的反应输入编号。
