Wie bekomme ich “Schlüssel”-Requisiten vom React-Element (bei Änderung)?

Lesezeit: 6 Minuten

jimmys Benutzeravatar
Jimmy

Ich möchte den Wert und den Schlüssel der Option erhalten, wenn ich sie auswähle onChange.

Ich weiß, dass ich Optionen bekommen kann Wert Einfachheit verwendet event.target.value in onChangeOption funktionieren, aber wie bekomme ich das hin key?

<select onChange={this.onChangeOption} value={country}>
    {countryOptions.map((item, key) =>
        <option key={key} value={item.value}>
            {item.name}
        </option>
    )}
</select>

  • Fühlen Sie sich wohl dabei, ein benutzerdefiniertes Attribut für diesen Fall zu erstellen? Wie data-key?

    – Agney

    2. November 2017 um 9:05 Uhr

Sie müssen den Wert im Schlüssel als eine andere Requisite übergeben.

Aus Dokumenten:

Schlüssel dienen als Hinweis für React, werden aber nicht an Ihre Komponenten weitergegeben. Wenn Sie denselben Wert in Ihrer Komponente benötigen, übergeben Sie ihn explizit als Prop mit einem anderen Namen:

Lesen: https://reactjs.org/docs/lists-and-keys.html

  • Das ist eine schlechte Antwort. es schlägt keine Lösung vor oder berücksichtigt, dass er es mit einem Eingeborenen zu tun hat select -Feld, sodass dies in irgendeiner Form verwendet werden kann, die möglicherweise beschädigt wird, wenn sie durch eine benutzerdefinierte Komponente ersetzt wird

    – caesay

    2. November 2017 um 9:04 Uhr

  • Danke für die Antwort, ich habe die Dokumentation gelesen, aber noch eine Frage. Bedeutet das, dass ich den Wert im Schlüssel als eine andere Requisite übergeben “muss”, damit ich den Schlüssel bekommen kann?

    – Jimmy

    2. November 2017 um 9:04 Uhr


  • Ja, das bedeutet es.

    – Naisheel Verdhan

    2. November 2017 um 9:38 Uhr

  • Danke für die Antwort, genau das, was ich brauche, um meine Verwirrung zu beseitigen.

    – Michael Harley

    5. Februar 2020 um 10:11 Uhr

Das Übergeben des Schlüssels als Requisite funktioniert offensichtlich, aber ein viel schnellerer Weg könnte darin bestehen, den Schlüssel als benutzerdefiniertes Attribut in Ihren HTML-Code aufzunehmen.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.onSelect = this.onSelect.bind(this);
  }
  onSelect(event) {
    const selectedIndex = event.target.options.selectedIndex;
        console.log(event.target.options[selectedIndex].getAttribute('data-key'));
  }

  render() {
    return ( 
      <div>
      <select onChange = {this.onSelect}>
       <option key="1" data-key="1">One</option> 
       <option key="2" data-key="2">Two</option>             </select> 
     </div>
    );
  }
}

ReactDOM.render( < App / > , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

  • Was ist hier selectedIndex? event.target.options.selectedIndex;

    – Bubble-Cord

    22. Oktober 2019 um 10:11 Uhr

  • Es gibt tatsächlich einen schöneren Weg, auf diese zuzugreifen data-* Attribute, und es ist detailliert hier. Kurz gesagt, Sie können verwenden element.dataset.<attribute_name> um den Wert des Attributs zu erhalten. In diesem Fall tun event.target.options[selectedIndex].datasets.key funktioniert auch

    – smac89

    4. Januar um 23:20 Uhr

Eine einfache Möglichkeit, dies zu tun, ist:

const functionCall = (event) => {
    console.log(event.target.getAttribute('a-key'));
}

<button a-key={1} onClick={functionCall}>Press Me</button>

Ich habe onClick gesetzt, aber Sie können jedes Ereignis verwenden.

Benutzeravatar von vsync
vsync

Stellen Sie sich eine Komponente wie diese vor:

<Component data={[{id:'a23fjeZ', name="foo"}, ...]}` 

Was eine Liste von Eingaben rendert und in a gelangt data prop, die eine Sammlung ist (Array von Objekte):

function Component ( props ){
    // cached handler per unique key. A self-invoked function with a "cache" object
    const onChange = (cache => param => {
        if( !cache[param] )
            cache[param] = e => 
                console.log(param, e.target.name, e.target.value)

        return cache[param];
    }
    )({});

    return props.data.map(item =>
        <input key={item.id} name={item.name} onChange={onChange(item.id)} />
    }

}

Wie Sie sehen, ist die key nicht zugegriffen wird, sondern an a übergeben wird Curry-Funktion die das Caching intern handhabt, um eine “endlose” Erstellung von Funktionen beim erneuten Rendern zu verhindern.

Sie müssen also den Schlüssel an die übergeben <option> als Requisite, aber da die <select> ein natives Feld ist und Änderungen intern verarbeitet, wird es etwas schwierig, diesen Schlüsselwert wieder herauszubekommen. Beginnen wir mit einem Thema nach dem anderen. Die Übergabe der Stütze an die Option könnte so einfach sein, wie die Optionskomponente so zu verpacken und die zu verwenden index prop als neue Schlüssel-Prop.

const CustomOption = ({ value, children, index }) => (
    <option key={index} value={value}>{value}</option>
);

Beachten Sie auch, dass wir oben einen benutzerdefinierten Komponenten-Wrapper erstellen, um die zu schlucken index prop von angewendet werden <option /> selbst als Reaktion mag keine unbekannten Requisiten auf Dom-Elementen.

Wenn wir nun das ausgewählte Ereignis innerhalb der Option handhaben könnten, wären wir fertig, aber das können wir nicht. also müssen wir auch eine benutzerdefinierte Auswahl treffen:

class CustomSelect extends React.Component {

    static propTypes = {
        value: PropTypes.object,
        onChange: PropTypes.func,
    }

    handleChanged = (e) => {
        const newValue = e.target.value;
        let newKey;

        // iterate through our children searching for the <CustomOption /> that was just selected
        React.children.forEach(this.children, (c) => {
            if (c.props && c.props.index && c.props.value === newValue) {
                newKey = c.props.key;
            }
        });

        this.props.onChange(e, newKey);
    }

    render() {
        return (
            <select value={this.props.value} onChange={this.handleChanged}>
                {this.props.children}
            </select>
        );
    }
}

es hat zwei Requisiten valueund onChange. Beachten Sie, dass wir das Änderungsereignis abfangen, um den Index (den Schlüssel) zu finden, und ihn als zweiten Parameter an das übergeordnete Element weitergeben. Das ist nicht sehr schön, aber ich kann mir keinen anderen einfachen Weg vorstellen, dies zu tun, während ich immer noch das native verwende <select> Element.

Beachten Sie, dass Sie Ihre Verwendungen von ersetzen müssen <select> und <optoin> um diese neuen Klassen zu verwenden und die zuzuweisen index Stütze zusammen mit der key Stütze auf die Option.

  • Das ist großartig, daran habe ich noch nie gedacht.

    – Jimmy

    2. November 2017 um 10:07 Uhr

Benutzeravatar von Sreeragh AR
Sreeragh AR

Sie können alles passieren value. Ich denke, das löst dein Problem.

<select onChange={this.handleChange}>
        {this.state.countryOptions.map((item, key) =>
          <option key={key} 
            value={JSON.stringify({key, value:item.value})}>
            //passing index along with value
            {item.value}
          </option>
        )}
</select>

handleChange(e) {
    let obj = JSON.parse(e.target.value) 
   // gives object{ key:country index, value: country value}
  }

  • Das ist großartig, daran habe ich noch nie gedacht.

    – Jimmy

    2. November 2017 um 10:07 Uhr

Benutzeravatar von Ayomide Oladipo
Ayomide Oladipo

Ich bin Anfänger und kämpfe seit Tagen damit! Jetzt freue ich mich, Ihnen meine endgültige Antwort zu geben!

Das ist wirklich einfach – Alles, was Sie tun müssen, ist, eine anonyme Funktion zu deklarieren! für einen onClick auf das Element, das Sie dessen Schlüssel erkennen möchten!

z.B

data.map((item) => (<div
className = "newItem" key = {item.id} onClick = {() = displayKey(item.id)}
>{item.value}</div>))

dann kann Ihre Funktion so sein; zeigt jedes übergebene “val” an

const displayKey = (val) => {
    console.log(val)
}

Ich hoffe ich konnte helfen! Mit einem Problem zu kämpfen kann nervenaufreibend sein! Mit freundlichen Grüße .

1430710cookie-checkWie bekomme ich “Schlüssel”-Requisiten vom React-Element (bei Änderung)?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy