从React组件中的Select发送数字而不是字符串

Question

我有一个“受控” React组件，用于一个非常简单的下拉列表，如下所示：

const MyDropDown = ({field, handleChange}) => {

   return(

      <select name="myField" value={field} onChange={handleChange}>
         <option value="1">Apples</option>
         <option value="2">Oranges<option>
         <option value="3">Bananas</option>
      <select>
   );
}

MyDropDown.propTypes = {
   field: PropTypes.number.isRequired,
   handleChange: PropTypes.func.isRequired
}

export default MyDropDown;

最初，我的值设置field到0我的减速器。这是正确的做法，因为值始终是数字。我遇到的问题是：

最初，一切都很好，但是当我进行选择时，我得到一条警告，提示提供了无效的字符串类型prop，并且它期望有一个数字。

如何确保选项中的值是数字而不是字符串？

顺便说一句，我尝试不使用引号作为选项值，但是React似乎不喜欢它，即 <option value=1>Apples</option>

Answer 1

我认为你的handleChange看起来像这样

handleChange(e) {
    this.setState({ val: e.target.value});
}

这里的问题是html需要在属性值两边加上引号，因此本质上e.target.value解析为字符串。一个简单的解决方法是通过使用将其解析为数字

parseInt(e.target.value, 10);