javascript - react - Reaccionar JSX: seleccionando "seleccionado" en la opción seleccionada<selección>

react js init

Question

En un componente React para un menú <select> , necesito establecer el atributo selected en la opción que refleje el estado de la aplicación.

En render() , optionState se pasa del propietario del estado al componente SortMenu. Los valores de las opciones se pasan como props desde 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.

Al hacer esto se 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>

¿Hay alguna forma recomendada de resolver esto?

Answer 1

Aquí está el último ejemplo de cómo hacerlo. Desde los documentos reaccionar , más la sintaxis del método de enlace automático "fat-arrow".

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''coconut''};
  }

  handleChange = (event) =>
    this.setState({value: event.target.value});

  handleSubmit = (event) => {
    alert(''Your favorite flavor is: '' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
} 

Answer 2

Aquí hay una solución completa que incorpora la mejor respuesta y los comentarios a continuación (lo que podría ayudar a alguien que está luchando para unirlo todo):

en el componente principal:

class ReactMain extends React.Component {

  constructor(props) {
    super(props);
    // bind once here, better than multiple times in render
    this.handleChange = this.handleChange.bind(this);
    this.state = { fruit: props.item.fruit };
  }

  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  saveItem() {
    const item = {};
    item.fruit = this.state.fruit;
    // do more with item object as required (e.g. save to database)
  }

  render() {
    return (
      <ReactExample name="fruit" value={this.state.fruit} onChange{this.handleChange} />
    )
  }

}

Componente incluido (que ahora es un funcional sin estado):

export const ReactExample = (props) => (
  <select name={props.name} value={props.value} onChange={props.handleChange}>
    <option value="A">Apple</option>
    <option value="B">Banana</option>
    <option value="C">Cranberry</option>
  </select>
)

el componente principal mantiene el valor seleccionado para la fruta (en estado), el componente incluido muestra el elemento seleccionado y las actualizaciones se devuelven al componente principal para actualizar su estado (que luego vuelve al componente incluido para cambiar el valor seleccionado).

Tenga en cuenta el uso de un nombre prop que le permite declarar un solo método handleChange para otros campos en el mismo formulario, independientemente de su tipo.

Answer 3

He tenido un problema con las etiquetas <select> no se actualizan a la <option> correcta cuando cambia el estado. Mi problema parece ser que si se procesa dos veces en una sucesión rápida, la primera vez sin una <option> preseleccionada pero la segunda con una, la etiqueta <select> no se actualiza en la segunda renderización, pero permanece activa el predeterminado primero

Encontré una solución a esto usando refs . Debe obtener una referencia a su nodo de etiqueta <select> (que podría estar anidado en algún componente) y luego actualizar manualmente la propiedad de value en él, en el enlace componentDidUpdate .

componentDidUpdate(){
  let selectNode = React.findDOMNode(this.refs.selectingComponent.refs.selectTag);
  selectNode.value = this.state.someValue;
}

Answer 4

Podría hacer lo que React le advierte cuando intente establecer la propiedad "seleccionada" de la <option> :

Use el value defaultValue o las defaultValue value en <select> lugar de la configuración selected en <option> .

Por lo tanto, puede usar options.value en el defaultValue por defaultValue de su selección

Answer 5

Publicar una respuesta similar para MULTISELECT / optgroups:

render() {
  return(
    <div>
      <select defaultValue="1" onChange={(e) => this.props.changeHandler(e.target.value) }>
        <option disabled="disabled" value="1" hidden="hidden">-- Select --</option>
        <optgroup label="Group 1">
          {options1}
        </optgroup>
        <optgroup label="Group 2">
          {options2}
        </optgroup>
      </select>
    </div>
  )
}

Answer 6

React entiende automáticamente los booleanos para este propósito, por lo que simplemente puede escribir (nota: no recomendado)

<option value={option.value} selected={optionsState == option.value}>{option.label}</option>

y saldrá ''seleccionado'' apropiadamente.

Sin embargo, React hace esto aún más fácil para ti. En lugar de definir selected en cada opción, puede (y debería) simplemente escribir value={optionsState} en la etiqueta de selección en sí :

<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 React select .

Answer 7

Resolví un problema similar configurando valores predeterminados:

ComponentName.defaultProps = {
  propName: ''''
}

<select value="this.props.propName" ...

Así que ahora evito errores en la compilación si mi prop no existe hasta el montaje.

Answer 8

Simplemente agregue como primera opción de su etiqueta seleccionada:

<option disabled hidden value=''''></option>

Esto se convertirá en predeterminado y cuando seleccione una opción válida se establecerá en su estado

Answer 9

Tengo una solución simple siguiendo el HTML básico.

<input
  type="select"
  defaultValue=""
  >
  <option value="" disabled className="text-hide">Please select</option>
  <option>value1</option>
  <option>value1</option>
</input>

.text-hide es una clase de bootstrap, si no está usando bootstrap, aquí está:

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

Answer 10

***Html:***
<div id="divContainer"></div>

var colors = [{ Name: ''Red'' }, { Name: ''Green'' }, { Name: ''Blue'' }];
var selectedColor = ''Green'';

ReactDOM.render(<Container></Container>, document.getElementById("divContainer"));

var Container = React.createClass({
    render: function () {
        return (
        <div>            
            <DropDown data={colors} Selected={selectedColor}></DropDown>
        </div>);
    }
});

***Option 1:***
var DropDown = React.createClass(
{
    render: function () {
        var items = this.props.data;
        return (
        <select value={this.props.Selected}>
            {
                items.map(function (item) {
                    return <option value={item.Name }>{item.Name}</option>;
                })
            }
        </select>);
    }
});

***Option 2:***
var DropDown = React.createClass(
{
    render: function () {
        var items = this.props.data;
        return (
        <select>
            {
                items.map(function (item) {
                    return <option value={item.Name} selected={selectedItem == item.Name}>{item.Name}</option>;
                })
            }
        </select>);
    }
});

***Option 3:***
var DropDown = React.createClass(
    {
        render: function () {
            var items = this.props.data;
            return (
            <select>
                {
                    items.map(function (item) {

                                            if (selectedItem == item.Name)
                    return <option value={item.Name } selected>{item.Name}</option>;
                else
                    return <option value={item.Name }>{item.Name}</option>;
                    })
                }
            </select>);
        }
    });