Reaccionar JSX: seleccionando "seleccionado" en la opción <seleccionar> seleccionada

En un componente Reaccionar para un <select>menú, necesito establecer el selectedatributo en la opción que refleja el estado de la aplicación.

En render(), optionStatese pasa 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>

¿Hay alguna forma recomendada de resolver esto?

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' adecuadamente.

Sin embargo, React lo hace aún más fácil para usted. En lugar de definir selecteden cada opción, puede (y debería) simplemente escribir value={optionsState}en la propia 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 React select tag doc .

Puede hacer lo que React le advierte cuando intenta establecer la propiedad "seleccionada" de <option>:

Utilice el defaultValueo valuelos apoyos en <select>lugar de establecer selecteden <option>.

Por lo tanto, puede usar options.valueel defaultValuede su selección

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 lucha por reconstruirlo todo):

ACTUALIZACIÓN PARA ES6 (2019): uso de funciones de flecha y desestructuración de objetos

en componente principal:

class ReactMain extends React.Component {

  constructor(props) {
    super(props);
    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} handleChange={this.handleChange} />
    )
  }

}

componente incluido (que ahora es funcional sin estado):

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

RESPUESTA PREVIA (usando bind):

en 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} handleChange={this.handleChange} />
    )
  }

}

componente incluido (que ahora es 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.

Aquí está el último ejemplo de cómo hacerlo. De los documentos de reacción , más la sintaxis del método de "flecha gruesa" de enlace automático

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>
    );
  }
} 

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

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

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

***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>);
        }
    });

He tenido un problema con las <select>etiquetas que no se actualizan correctamente <option>cuando cambia el estado. Mi problema parecía ser que si renderizaba dos veces seguidas, la primera vez sin preselección <option>pero la segunda vez con una, la <select>etiqueta no se actualiza en la segunda representación, sino que permanece en la predeterminada primero.

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

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

Publicando 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>
  )
}

Tengo una solución simple es seguir 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 usa bootstrap, aquí está:

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

Resolví un problema similar estableciendo defaultProps:

ComponentName.defaultProps = {
  propName: ''
}

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

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