ESCENARIO Un usuario tiene un desplegable y selecciona una opción. Quiero mostrar ese menú desplegable y hacer que esa opción sea un valor predeterminado que fue seleccionado por ese usuario la última vez.
Estoy usando el atributo seleccionado en la opción, pero React genera una advertencia que me pide que use el valor predeterminado en la selección.
Por ejemplo
render: function() { let option_id = [0, 1]; let options = [{name: 'a'}, {name: 'b'}]; let selectedOptionId = 0 return ( <select defaultValue={selectedOptionId}> {option_id.map(id => <option key={id} value={id}>{options[id].name}</option> )} </select> ) } });El problema es que no conozco el ID de opción seleccionado ya que la opción seleccionada podría ser cualquier opción. ¿Cómo encontraría el valor predeterminado ?
React usa value en lugar de selected por coherencia entre los componentes del formulario. Puede usar defaultValue para establecer un valor inicial. Si está controlando el valor , también debe establecer el value . De lo contrario, no establezca el value y, en su lugar, maneje el evento onChange para reaccionar a la acción del usuario.
Tenga en cuenta que value y defaultValue deben coincidir con el value de la opción.
En una instancia en la que desea establecer un marcador de posición y no seleccionar un valor predeterminado, puede usar esta opción.
<select defaultValue={'DEFAULT'} > <option value="DEFAULT" disabled>Choose a salutation ...</option> <option value="1">Mr</option> <option value="2">Mrs</option> <option value="3">Ms</option> <option value="4">Miss</option> <option value="5">Dr</option> </select>¡Aquí el usuario se ve obligado a elegir una opción!
EDITAR
Si este es un componente controlado
En este caso, desafortunadamente, tendrá que usar tanto el valor predeterminado como el valor que viola React un poco. Esto se debe a que reaccionar por semántica no permite establecer un valor deshabilitado como activo.
function TheSelectComponent(props){ let currentValue = props.curentValue || "DEFAULT"; return( <select value={currentValue} defaultValue={'DEFAULT'} onChange={props.onChange}> <option value="DEFAULT" disabled>Choose a salutation ...</option> <option value="1">Mr</option> <option value="2">Mrs</option> <option value="3">Ms</option> <option value="4">Miss</option> <option value="5">Dr</option> </select> ) }Lo que podría hacer es hacer que el atributo selected en la etiqueta <select> sea un atributo de this.state que configuró en el constructor. De esa manera, el valor inicial que establece (el valor predeterminado) y cuando cambia el menú desplegable, debe cambiar su estado.
constructor(){ this.state = { selectedId: selectedOptionId } } dropdownChanged(e){ this.setState({selectedId: e.target.value}); } render(){ return( <select value={this.selectedId} onChange={this.dropdownChanged.bind(this)}> {option_id.map(id => <option key={id} value={id}>{options[id].name}</option> )} </select> ); }