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

最初，一切都很好，但是当我做出选择时，我收到一条警告，指出提供了字符串类型的无效 Prop ，并且它需要一个数字。

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

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

请您参考如下方法:

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

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

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

parseInt(e.target.value, 10);