En HTML, el atributo ‘ seleccionado’ en la etiqueta de opción se usa para establecer el valor predeterminado en el menú de selección. El mismo enfoque también se puede usar con React para establecer un valor predeterminado si no estamos usando React Select Component. Sin embargo, si está utilizando react-select , debe seguir un enfoque diferente como se describe a continuación.
Los siguientes son los dos enfoques para establecer el valor predeterminado en la selección usando ReactJS:
Enfoque 1: sin usar el componente React Select
Puede usar un atributo booleano seleccionado con una opción cuyo valor debe establecerse como predeterminado. Si ninguna opción está integrada con este atributo, la primera opción se selecciona de forma predeterminada. Puedes leer más sobre este método en este artículo .
Sintaxis:
<option value='value' selected> label </option>
Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.
App.js
import { Component } from 'react' class App extends Component { constructor(props) { super(props) } render() { return ( <div> <p>Geeks For Geeks</p> <form> <select name='languages' style={{ width: '200px' }}> <option value='JAVA'> JAVA </option> <option value='C++'> C++ </option> <option value='Javascript' selected> Javascript </option> <option value='Python'> Python </option> <option value='R'> R </option> <option value='Scala'> Scala </option> <option value='Swift'> Swift </option> </select> </form> </div> ); } } export default App;
Producción:
Enfoque 2: Uso del componente React Select
Puede usar un atributo defaultValue para establecer el valor predeterminado en el menú Seleccionar. Si ninguna opción está integrada con este atributo, la primera opción se selecciona de forma predeterminada. Puede crear una array del objeto donde almacenará todas las opciones que se mostrarán y cualquier objeto único se pasa en el atributo defaultValue .
Sintaxis:
<Select option={optionArray} defaultValue={optionArray[index]} />
Nota: Asegúrese de haber instalado el módulo react-select usando el siguiente comando.
npm install react-select
Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.
App.js
import { Component } from 'react' import Select from 'react-select'; const options = [ { value: 'C++', label: 'C++' }, { value: 'JAVA', label: 'JAVA' }, { value: 'Javascript', label: 'Javascript' }, { value: 'Python', label: 'Python' }, { value: 'Swift', label: 'Swift' } ]; class App extends Component { constructor(props) { super(props) } render() { return ( <div> <p>Geeks For Geeks</p> <Select value={options.value} options={options} defaultValue={options[1]} /> </div> ); } } export default App;
Producción:
Publicación traducida automáticamente
Artículo escrito por harshshukla5 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA