javascript - tutorial - simple react example




JSX reaktivieren: Wählen Sie "ausgewählt" für die ausgewählte Option<select> (7)

In einer React-Komponente für ein <select> -Menü muss ich das selected Attribut für die Option festlegen, die den Anwendungsstatus widerspiegelt.

In render() wird der optionState vom Statuseigner an die SortMenu-Komponente übergeben. Die Optionswerte werden als props von 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, aber das Problem wird 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 einen empfohlenen Weg, dies zu lösen?


Eine ähnliche Antwort für MULTISELECT / optgroups schreiben:

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

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

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

Dies wird zum Standard und wenn Sie eine gültige Option auswählen, wird auf Ihren Status eingestellt


Hier ist eine vollständige Lösung, die die beste Antwort und die Kommentare darunter enthält (was jemandem helfen könnte, alles zusammenzufügen):

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

}

enthaltene Komponente (die jetzt ein zustandsloses Funktional 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 fruit bei (in state), die enthaltene Komponente zeigt das select-Element an und Aktualisierungen werden an die Hauptkomponente zurückgegeben, um ihren Status zu aktualisieren (der dann zu der enthaltenen Komponente zurückkehrt, um den ausgewählten Wert zu ändern).

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


Ich habe ein ähnliches Problem mit defaultProps behoben:

ComponentName.defaultProps = {
  propName: ''
}

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

So vermeide ich nun Fehler beim Kompilieren, wenn meine Requisite erst beim Mounten existiert.


Ich hatte ein Problem mit <select> -Tags, die nicht auf die richtige <option> aktualisiert wurden, wenn sich der Status ändert. Mein Problem schien zu sein, dass, wenn Sie zweimal in schneller Folge rendern, das erste Mal ohne vorgewählte <option> aber das zweite Mal mit einem, dann wird das <select> -Tag nicht beim zweiten Render aktualisiert, sondern bleibt eingeschaltet der Standard zuerst.

Ich habe eine Lösung gefunden, die refs . Sie müssen einen Verweis auf Ihren <select> -Tag-Knoten erhalten (der in einer Komponente verschachtelt sein könnte) und anschließend die value für ihn im componentDidUpdate Hook manuell aktualisieren.

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

Reagiert automatisch Booleans für diesen Zweck, so dass 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 ausgeben.

React macht es Ihnen jedoch noch leichter. Anstatt die Option für jede Option zu definieren, können Sie (und sollten) einfach value={optionsState} auf das select-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 unter http://facebook.github.io/react/docs/forms.html#why-select-value .


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






react-jsx