Wie wendet ein id-Attribut, um ein untergeordnetes element eines ReactJS Komponente?

Also ich habe ein dropdown-Komponente:

import React from 'react';
import { PropTypes } from 'prop-types';

export default class Dropdown extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: this.props.selectedDropdownValue,
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.setState({
      value: e.target.value,
    });

    this.props.onChange(e.target.value);
  }

  render() {
    let disabled = false;
    let dropdownOptions = null;
    const { options } = this.props;

    //Disable dropdown is the disabled attribute is added
    if (options) {
      dropdownOptions = this.props.options.map((option) =>
        <option value={option.key} key={option.key} >{option.display}</option>,
      );
    } else {
      //Setting default options
      const defaultOptions = [
        { key: '', display: 'Please configure defaultOptions' },
      ];

      disabled = true;

      dropdownOptions = defaultOptions.map((option) =>
        <option value={option.key} key={option.key} >{option.display}</option>,
      );
    }

    return (
      <select
        value={this.state.value}
        onChange={this.handleChange}
        disabled={disabled}
      >
        { dropdownOptions }
      </select>
    );
  }
}

Dropdown.propTypes = {
  options: PropTypes.arrayOf(PropTypes.object),
  onChange: PropTypes.func,
  selectedDropdownValue: PropTypes.string,
};

Dropdown.defaultProps = {
  options: undefined,
  onChange: this.handleChange,
  selectedDropdownValue: '',
};

Und hier ist, wie ich bin rendering der dropdown-aus meiner Sicht:

import React from 'react';
import { PropTypes } from 'prop-types';
import Dropdown from 'components/Dropdown';

class Anish extends React.Component {
  render() {
    return (
      <div>
        <div>
          Value Selected: {this.props.selectedDropdownValue}
        </div>
        <label htmlFor={'dropdownId1'}>Sort by: </label>
        <Dropdown
          id="dropdownId1"
          options={[
            { key: '', display: 'Please select a value' },
            { key: 'NJ', display: 'New Jersey' },
            { key: 'NY', display: 'New York' },
          ]}
          onChange={this.props.onSetDropdownValue}
        />
      </div>
    );
  }
}

Anish.propTypes = {
  selectedDropdownValue: PropTypes.string,
  onSetDropdownValue: PropTypes.func.isRequired,
};

Anish.defaultProps = {
  selectedDropdownValue: '',
};

export default Anish;

Hier ist, wie die Dropdownliste, und die Beschriftung sind im browser gerendert:

Wie wendet ein id-Attribut, um ein untergeordnetes element eines ReactJS Komponente?

Also wie kann ich die id, die auf <Dropdown /> zu den <select> drin?

Jede Hilfe ist willkommen.

<select id={this.props.id}...?
Duh. Ich dachte, das habe ich versucht vorher, aber verwechselt wurde. Danke! Fühlen Sie sich frei, um post-eine Antwort auf die Frage, so kann man zumindest einige weitere Punkte...

InformationsquelleAutor Ralph David Abernathy | 2017-07-28

  1. 3

    props enthält die ID aus der Dropdown Komponente, da Sie aber innerhalb Reagieren Komponente verwenden this.props.

    return (
  <select
    id={this.props.id}
    value={this.state.value}
    onChange={this.handleChange}
    disabled={disabled}
  >
    {dropdownOptions}
  </select>
)

    InformationsquelleAutor Andy

  2. 1

    Sollte man hinzufügen-id={option.id} zu if/else und auch auf Sie zurück. Hinweis: das in Ihr Anish Klasse übergeben Sie die id="dropdownId1" als requisite. Nicht sicher, ob das beabsichtigt.

    if (options) {
   dropdownOptions = this.props.options.map((option) =>
  <option value={option.key} id={option.id} key={option.key} >{option.display}</option>,
  );
} else {
 //Setting default options
      const defaultOptions = [
        { key: '', display: 'Please configure defaultOptions' },
      ];

      disabled = true;

      dropdownOptions = defaultOptions.map((option) =>
        <option id={option.id} value={option.key} key={option.key} >{option.display}</option>,
      );
    }
    return (
      <select
        value={this.state.value}
        onChange={this.handleChange}
        disabled={disabled}
        id={option.id}
      >
        { dropdownOptions }
      </select>
    );

    //Vergessen Sie nicht auf id hinzufügen, um propTypes

    id: React.PropTypes.string,

    InformationsquelleAutor Michael De La Cruz

Schreibe einen Kommentar