Tengo un componente React "controlado" para un menú desplegable muy simple que se ve así:
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; Inicialmente, establecí el valor del field en 0 en mi reductor. Esto es lo correcto porque el valor siempre será un número. El problema que tengo es este:
Inicialmente, todo está bien, pero cuando hago una selección, recibo una advertencia que dice que se proporcionó una propiedad de tipo cadena no válida y que esperaba un número.
¿Cómo me aseguro de que los valores en las opciones sean números y no cadenas?
Por cierto, intenté no usar comillas para los valores de las opciones, pero a React no parece gustarle, es decir, <option value=1>Apples</option>
Supongo que su handleChange se parece a esto
handleChange(e) { this.setState({ val: e.target.value}); }El problema aquí es que html necesita comillas alrededor de los valores de los atributos, por lo que, en esencia, e.target.value se resuelve en una cadena. Una solución simple sería analizarlo en un número usando
parseInt(e.target.value, 10);si su controlador se ve como el de arriba, puede usar +e.target.value