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

【问题标题】：Sending number instead of string from Select in React component从 React 组件中的 Select 发送数字而不是字符串
【发布时间】：2017-06-06 00:57:56
【问题描述】：

我有一个 “受控” 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。这是正确的做法，因为该值将始终是一个数字。我遇到的问题是这样的：

最初，一切都很好，但是当我进行选择时，我收到一条警告，提示提供了一个无效的字符串类型的道具，它需要一个数字。

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

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

【问题讨论】：

只是一个建议，value={1} 有效吗？
我自己只是想到了这个并尝试了它，但仍然收到相同的警告。它仍然将其视为字符串而不是数字。
好吧，我假设字段是层次更高的组件中的一个状态，它是在 handleChange 函数中设置的。也许您需要在设置该状态之前将值解析为数字？
你说得对！ @teaflavored 刚刚给了我同样的答案。非常感谢！

标签： javascript reactjs redux react-redux

【解决方案1】：

我假设你的 handleChange 看起来像这样

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

这里的问题是 html 需要在属性值周围加上引号，所以本质上 e.target.value 会解析为字符串。一个简单的解决方法是使用

将其解析为一个数字

parseInt(e.target.value, 10);

【讨论】：

对于那些不知道parseInt函数的第二个参数是radix的人。对于十进制数，基数必须等于 10。

【解决方案2】：

如果你的处理程序看起来像上面你可以使用+e.target.value

【讨论】：