JSX reagieren: Wählen Sie bei der ausgewählten Option <Auswahl> die Option „Ausgewählt“

In einer React-Komponente für ein <select>Menü muss das selectedAttribut für die Option festgelegt werden, die den Anwendungsstatus widerspiegelt.

In render()dem optionStatevon dem Zustand Eigentümer an die SortMenu Komponente übergeben. Die Optionswerte werden propsab JSON übergeben.

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

Dies löst jedoch einen Syntaxfehler bei der JSX-Kompilierung aus.

Dadurch wird der Syntaxfehler beseitigt, das Problem wird jedoch offensichtlich nicht gelöst:

var selected = (optionState === option.value) ? 'selected' : 'false';

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

Ich habe es auch versucht:

var selected = (optionState === option.value) ? true : false;

<option value={option.value} {selected ? 'selected' : ''}>{option.label}</option>

Gibt es eine empfohlene Lösung?

React versteht automatisch Boolesche Werte für diesen Zweck, sodass Sie einfach schreiben können (Hinweis: nicht empfohlen)

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

und es wird 'ausgewählt' entsprechend ausgegeben.

React macht dies jedoch noch einfacher für Sie. Anstatt selectedjede Option zu definieren, können (und sollten) Sie einfach value={optionsState}auf das Auswahl-Tag selbst schreiben :

<select value={optionsState}>
  <option value="A">Apple</option>
  <option value="B">Banana</option>
  <option value="C">Cranberry</option>
</select>

Weitere Informationen finden Sie im Dokument React select tag .

Sie können das tun, was React Sie warnt, wenn Sie versuchen, die "ausgewählte" Eigenschaft von <option>:

Verwenden Sie die defaultValueoder valueRequisiten auf , <select>anstatt Einstellung selectedauf <option>.

So können Sie options.valueauf der defaultValueIhrer Auswahl verwenden

Hier ist eine vollständige Lösung, die die beste Antwort und die Kommentare darunter enthält (was jemandem helfen könnte, der Schwierigkeiten hat, alles zusammenzusetzen):

UPDATE FOR ES6 (2019) - Verwenden von Pfeilfunktionen und Objektzerstörung

in der Hauptkomponente:

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

}

enthaltene Komponente (die jetzt eine zustandslose Funktion ist):

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

VORHERIGE ANTWORT (mit bind):

in der Hauptkomponente:

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

}

enthaltene Komponente (die jetzt eine zustandslose Funktion ist):

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

Die Hauptkomponente behält den ausgewählten Wert für Obst bei (im Status), die enthaltene Komponente zeigt das Auswahlelement an und Aktualisierungen werden an die Hauptkomponente zurückgegeben, um ihren Status zu aktualisieren (die dann zur eingeschlossenen Komponente zurückkehrt, um den ausgewählten Wert zu ändern).

Beachten Sie die Verwendung einer Namensstütze, mit der Sie unabhängig von ihrem Typ eine einzelne handleChange-Methode für andere Felder im selben Formular deklarieren können.

Hier ist das neueste Beispiel dafür. Aus Reaktionsdokumenten sowie der automatisch bindenden Syntax der "Fettpfeil" -Methode.

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

Fügen Sie einfach als erste Option Ihres ausgewählten Tags hinzu:

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

Dies wird zur Standardeinstellung und wenn Sie eine gültige Option auswählen, wird dies auf Ihren Status abgestimmt

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

Ich hatte ein Problem mit <select>Tags, die nicht korrekt aktualisiert wurden, <option>wenn sich der Status ändert. Mein Problem schien zu sein, dass, wenn Sie zweimal schnell hintereinander rendern, das erste Mal ohne Vorauswahl, <option>aber das zweite Mal mit einem, das <select>Tag beim zweiten Rendern nicht aktualisiert wird, sondern zuerst auf der Standardeinstellung bleibt.

Ich habe eine Lösung dafür mit refs gefunden . Sie müssen einen Verweis auf Ihren <select>Tag-Knoten (der möglicherweise in einer Komponente verschachtelt ist) abrufen und dann die valueEigenschaft im componentDidUpdateHook manuell aktualisieren .

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

Eine ähnliche Antwort für MULTISELECT / optgroups veröffentlichen:

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

Ich habe eine einfache Lösung, die dem HTML-Grundprinzip folgt.

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

.text-hide ist eine Bootstrap-Klasse. Wenn Sie kein Bootstrap verwenden, sind Sie hier:

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

Ich habe ein ähnliches Problem umgangen, indem ich defaultProps festgelegt habe:

ComponentName.defaultProps = {
  propName: ''
}

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

Jetzt vermeide ich Fehler beim Kompilieren, wenn meine Requisite erst nach dem Mounten vorhanden ist.