Estoy tratando de usar el widget de selección de reacción y pasarle una matriz simple de cadenas como la lista de opciones en lugar de los objetos {value, label} predeterminados. Ya configuré con éxito reaccionar-seleccionar para usar objetos con propiedades diferentes a las predeterminadas, por lo que asumí que configurarlo para cadenas simples simplemente funcionaría. Pero no es así, no importa qué elemento seleccione, la selección visible en el widget permanece siempre vacía.
Estoy usando react-select 4.3.1, y el siguiente es un ejemplo simplificado que muestra el comportamiento que he visto:
import React from "react"; import Select from "react-select"; const options = [ { value: "chocolate", label: "Chocolate" }, { value: "strawberry", label: "Strawberry" }, { value: "vanilla", label: "Vanilla" } ]; const optionsStringsOnly = ["Chocolate", "Strawberry", "Vanilla"]; const MyComponent = () => <Select options={options} />; const MyComponent2 = () => ( <Select options={optionsStringsOnly} getOptionLabel={(x) => x} getOptionValue={(x) => x} /> ); La versión MyComponent es de los ejemplos de reacción-selección y funciona como se esperaba. La versión Mycomponent2 no funciona y no entiendo por qué. He usado con éxito los accesorios getOptionLabel y getOptionValue para usar objetos con una forma diferente, pero para cadenas simples esto simplemente no funciona.
Sé que hay otras preguntas sobre el uso de cadenas simples con react-select, pero se supone que simplemente convertir las opciones en objetos {value,label} antes de pasarlas a react-select es aceptable. Quiero evitar eso, ya que eso requeriría reconvertir los valores más tarde, lo que sería realmente molesto en mi caso. Quiero pasar cadenas simples y obtener cadenas simples del widget de selección de reacción nuevamente.
¿Qué estoy haciendo mal aquí? ¿Cómo puedo usar cadenas simples como opciones con react-select?
La mayoría de la gente usa state para value , junto con un controlador onChange para controlarlo. Según sus comentarios, parece que solo está buscando un campo de formulario con el valor en él para un escenario POST de formulario típico, en lugar de manejar un objeto JS compuesto.
Si proporciona el mapeo y un accesorio de name , puede obtener exactamente lo que necesita. Al hacer esto:
const MyComponent2 = () => { const options = optionsStringsOnly.map(it => ({value: it, label:it})); return <Select name="foo_select" options={options} />; }; Cuando se realiza una selección, ese value se aplica al campo de formulario oculto con el name proporcionado. Si tuviera que inspeccionar la fuente en el navegador, vería:
<input name="foo_select" type="hidden" value="Chocolate"> El name prop es fundamental aquí, ya que eso es lo que le dice a React-Select que incluya el campo oculto en primer lugar.
La desventaja de hacerlo de esta manera es que no tiene forma de controlar mediante programación el valor de su campo. Puede establecer el valor del campo oculto, pero no actualizará automáticamente la visualización.