React JSX: seleccionando "seleccionado" en la opción <seleccionar> seleccionada
En un componente de React para un <select>menú, necesito configurar el selectedatributo en la opción que refleja el estado de la aplicación.
En render(), se optionStatepasa del propietario del estado al componente SortMenu. Los valores de las opciones se pasan propsdesde JSON.
render: function() {
var options = [],
optionState = this.props.optionState;
this.props.options.forEach(function(option) {
var selected = (optionState === option.value) ? ' selected' : '';
options.push(
<option value={option.value}{selected}>{option.label}</option>
);
});
// pass {options} to the select menu jsx
Sin embargo, eso desencadena un error de sintaxis en la compilación JSX.
Hacer esto elimina el error de sintaxis pero obviamente no resuelve el problema:
var selected = (optionState === option.value) ? 'selected' : 'false';
<option value={option.value} selected={selected}>{option.label}</option>
También probé esto:
var selected = (optionState === option.value) ? true : false;
<option value={option.value} {selected ? 'selected' : ''}>{option.label}</option>
¿Existe alguna forma recomendada de resolver esto?
React hace que esto sea aún más fácil para ti. En lugar de definir selectedcada opción, puede (y debe) simplemente escribir value={optionsState}en la etiqueta de selección :
<select value={optionsState}>
<option value="A">Apple</option>
<option value="B">Banana</option>
<option value="C">Cranberry</option>
</select>
Para obtener más información, consulte el documento de etiqueta de selección de React .
Además, React entiende automáticamente los valores booleanos para este propósito, por lo que puedes simplemente escribir (nota: no recomendado)
<option value={option.value} selected={optionsState == option.value}>{option.label}</option>
y saldrá 'seleccionado' apropiadamente.
Podrías hacer lo que React te advierte cuando intentas establecer la propiedad "seleccionada" de <option>:
Utilice los accesorios
defaultValueo en lugar de configurar en .value<select>selected<option>
Entonces, puedes usar options.valueen el defaultValuede tu selección
