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

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>

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

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.

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.

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

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 .