在選擇發送數字，而不是字符串陣營組件

我有一個「控制」陣營組成一個非常簡單的下拉，看起來像這樣：在選擇發送數字，而不是字符串陣營組件

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的價值到我的reducer中的0。這是正確的做法，因爲該值始終是一個數字。我遇到的問題是這樣的：

起初，一切都很好，但是當我做出選擇，我得到一個警告說string類型的無效道具提供，並期待一個數字。

如何確保在選項的值是數字，而不是字符串？

順便說一句，我試着不使用選項值引號，但反應似乎並不喜歡它，即

來源

2017-01-20 Sam

只是一個建議，'value = {1}'工作嗎？ –

我只是想到了自己，嘗試過，但仍然得到同樣的警告。它仍然把它當作一個字符串而不是一個數字。 – Sam

好，我假定場處於較高層次組分，其在handleChange功能設定的狀態。也許你需要在設置該狀態之前將值解析爲數字？ –

我假設你handleChange看起來像這樣

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

這裏的問題是，HTML需要引用屬性值，所以本質上e.target.value解析爲一個字符串。一個簡單的解決方法是將其解析爲數字

parseInt(e.target.value, 10);

來源

2017-01-20 23:14:01 teaflavored

是的!!!完全正確！ – Sam

在選擇發送數字，而不是字符串陣營組件

回答

相關問題