如何在一个React组件中实现多个语义UI允许添加下拉列表

Question

我有一个React Component，我正在尝试使用多个Semantic UI Dropdown Allow Additions

以下是我的代码：

const options = [
  { key: '1', text: '1', value: '1' },
  { key: '2', text: '2', value: '2' },
  { key: '3', text: '3', value: '3' },
  { key: '4', text: '4', value: '4' },
  { key: '5', text: '5', value: '5' },
  { key: '6', text: '6', value: '6' },
  { key: '7', text: '7', value: '7' },
  { key: '8', text: '8', value: '8' },
  { key: '9', text: '9', value: '9' },
];

class ReviewerRequirements extends Component { 
  state = {
    startDate: null,
    endData: null,
    reviewType: '',
    grantee: [],
    granteeId: '',
    pendingReviewersLoaded: false,
    filtering: false,
    showSearchModal: false,
    errors: {},
    reviewer: [],
    filteredReviewers: [],
    showAddButton: false,
    options,
    noOfDays: [],
    reviewPositions: null,
    value: '',
    reviewerSearch: {
      name: '',
      searchName: '',
      searchCategory: '',
      fromDate: null,
      toDate: null,
      noOfDays: null,
      selectedReviewers: [],
      checked: [],
      languageSkills: [],
      contentAreaSkills: [],
      otherSkills: [],
    },
  };

  componentDidMount = () => {
    const { startDate, endDate } = this.state;
    const daysTotal = moment(endDate).diff(startDate, 'days');

    this.setState({
      noOfDays: daysTotal,
      optionNumberOfDaysRequired: [
        { key: '1', text: '1', value: '1' },
        { key: '2', text: '2', value: '2' },
        { key: '3', text: '3', value: '3' },
        { key: '4', text: '4', value: '4' },
        { key: '5', text: '5', value: '5' },
        { key: '6', text: '6', value: '6' },
        { key: '7', text: '7', value: '7' },
        { key: '8', text: '8', value: '8' },
        { key: '9', text: '9', value: '9' },
      ],
      optionLanguageSkills: [
        { key: 'English', text: 'English', value: 'English' },
        { key: 'French', text: 'French', value: 'French' },
        { key: 'Spanish', text: 'Spanish', value: 'Spanish' },
        { key: 'German', text: 'German', value: 'German' },
        { key: 'Chinese', text: 'Chinese', value: 'Chinese' },
      ],
      optionContentAreaSkills: [
        { key: 'Content-A', text: 'Content-A', value: 'Content-A' },
        { key: 'Content-B', text: 'Content-B', value: 'Content-B' },
        { key: 'Content-C', text: 'Content-C', value: 'Content-C' },
        { key: 'Content-D', text: 'Content-D', value: 'Content-D' },
        { key: 'Content-E', text: 'Content-E', value: 'Content-E' },
      ],
      optionOtherSkills: [
        { key: 'Other-A', text: 'Other-A', value: 'Other-A' },
        { key: 'Other-B', text: 'Other-B', value: 'Other-B' },
        { key: 'Other-C', text: 'Other-C', value: 'Other-C' },
        { key: 'Other-D', text: 'Other-D', value: 'Other-D' },
        { key: 'Other-E', text: 'Other-E', value: 'Other-E' },
      ],
    });
  };

  handleReviewPositionChange = (e, { value }) =>
    this.setState({ reviewPositions: value });

  handleReviewPositionAddition = (e, { value }) => {
    this.setState({
      options: [{ text: value, value }, ...this.state.options],
    });
  };

  handleNumberOfDaysChange = (e, { value }) =>
    this.setState({ noOfDays: value });

  handleNumberOfDaysAddition = (e, { value }) => {
    this.setState({
      optionNumberOfPositions: [
        { text: value, value },
        ...this.state.optionNumberOfDaysRequired,
      ],
    });
  };

  handleLanguageSkillsChange = (e, { value }) =>
    this.setState({ languageSkills: value });

  handleLanguageSkillsAddition = (e, { value }) => {
    this.setState({
      optionLanguageSkills: [
        { text: value, value },
        ...this.state.optionLanguageSkills,
      ],
    });
  };

  handleContentAreaSkillsChange = (e, { value }) =>
    this.setState({ contentAreaSkills: value });

  handleContentAreaSkillsAddition = (e, { value }) => {
    this.setState({
      optionContentAreaSkills: [
        { text: value, value },
        ...this.state.optionContentAreaSkills,
      ],
    });
  };

  handleOtherSkillsChange = (e, { value }) =>
    this.setState({ otherSkills: value });

  handleOtherSkillsAddition = (e, { value }) => {
    this.setState({
      optionOtherSkills: [
        { text: value, value },
        ...this.state.optionOtherSkills,
      ],
    });
  };

  showSkillsModalCategoryUI = () => {
    const {
      reviewPositions,
      noOfDays,
      startDate,
      endDate,
      optionNumberOfDaysRequired,
      optionLanguageSkills,
      optionContentAreaSkills,
      optionOtherSkills,
      reviewerSearch: { languageSkills, contentAreaSkills, otherSkills },
    } = this.state;

    var data = [];
    var length = reviewPositions; // user defined length

    for (var i = 0; i < length; i++) {
      data.push('undefined');
    }

    const row = data.map((position, index) => {
      return (
        <div key={index}>
          <div className="ui grid">
            <div className="one wide column">
              <p>Role</p>
            </div>
            <div className="one wide column">
              <Dropdown
                options={optionNumberOfDaysRequired}
                placeholder="# of Days"
                search
                selection
                fluid
                allowAdditions
                multiple={true}
                value={noOfDays}
                onAddItem={this.handleNumberOfDaysAddition}
                onChange={this.handleNumberOfDaysChange}
              />
            </div>
            <div className="five wide column">
              <Form.Group>
                <Form.Field
                  name="startDate"
                  control={DatePicker}
                  placeholder="Please select start Date"
                  isClearable={true}
                  selected={startDate && startDate}
                  selectsStart
                  minDate={moment()}
                  startDate={startDate && startDate}
                  onChange={this.handleStartDateChange}
                />
                <Form.Field
                  name="endDate"
                  control={DatePicker}
                  placeholder="Please select end date"
                  isClearable={true}
                  selected={endDate && endDate}
                  selectsEnd
                  startDate={startDate && startDate}
                  minDate={startDate && startDate}
                  endDate={endDate}
                  onChange={this.handleEndDateChange}
                />
              </Form.Group>
            </div>
            <div className="three wide column">
              <Dropdown
                options={optionLanguageSkills}
                placeholder="Select or Add A Language"
                search
                selection
                fluid
                allowAdditions
                multiple={true}
                value={languageSkills}
                onAddItem={this.handleLanguageSkillsAddition}
                onChange={this.handleLanguageSkillsChange}
              />
            </div>
            <div className="three wide column">
              <Dropdown
                options={optionContentAreaSkills}
                placeholder="Select or Add Content Area Skill"
                search
                selection
                fluid
                allowAdditions
                multiple={true}
                value={contentAreaSkills}
                onAddItem={this.handleContentAreaSkillsAddition}
                onChange={this.handleContentAreaSkillsChange}
              />
            </div>
            <div className="three wide column">
              <Dropdown
                options={optionOtherSkills}
                placeholder="Select or Add Another Skill"
                search
                selection
                fluid
                allowAdditions
                multiple={true}
                value={otherSkills}
                onAddItem={this.handleOtherSkillsAddition}
                onChange={this.handleOtherSkillsChange}
              />
            </div>
          </div>
        </div>
      );
    });
    return row;
  };

  showReviewModalCategroyUI = () => {
    const {
      reviewPositions,
      noOfDays,
      optionNumberOfDaysRequired,
      startDate,
      endDate,
    } = this.state;

    var data = [];
    var length = reviewPositions; // user defined length

    for (var i = 0; i < length; i++) {
      data.push('undefined');
    }

    const row = data.map((position, index) => {
      return (
        <div key={index}>
          <div className="ui grid">
            <div className="four wide column">
              <p>Reviewer</p>
            </div>
            <div className="two wide column">
              <Dropdown
                options={optionNumberOfDaysRequired}
                placeholder="# of Days"
                search
                selection
                fluid
                allowAdditions
                multiple={true}
                value={noOfDays}
                onAddItem={this.handleNumberOfDaysAddition}
                onChange={this.handleNumberOfDaysChange}
              />
            </div>
            <div className="ten wide column">
              <Form.Group widths="equal">
                <Form.Field
                  name="startDate"
                  control={DatePicker}
                  placeholder="Please select start Date"
                  isClearable={true}
                  selected={startDate && startDate}
                  selectsStart
                  minDate={moment()}
                  startDate={startDate && startDate}
                  onChange={this.handleStartDateChange}
                />
                <Form.Field
                  name="endDate"
                  control={DatePicker}
                  placeholder="Please select end date"
                  isClearable={true}
                  selected={endDate && endDate}
                  selectsEnd
                  startDate={startDate && startDate}
                  minDate={startDate && startDate}
                  endDate={endDate}
                  onChange={this.handleEndDateChange}
                />
              </Form.Group>
            </div>
          </div>
        </div>
      );
    });
    return row;
  };

  renderSearchModal = () => {
    const { startDate, endDate } = this.props;
    const { unscheduled } = this.props.reviewers;
    const {
      showAddButton,
      value,
      showNextButton,
      reviewPositions,
    } = this.state;

    const start = moment(startDate)
      .startOf('day')
      .format('MM/DD/YYYY');
    const end = moment(endDate)
      .endOf('day')
      .format('MM/DD/YYYY');

    return (
      <Modal
        className="modal-container"
        overlayClassName="modal-overlay-container"
        isOpen={this.state.showSearchModal}
        onRequestClose={() => this.toggleModal()}
        contentLabel={`Search Unscheduled Reviewers (${start} - ${end})`}
      >
        <Well className="">
          <div className="filter-header">
            <h3>Reviewer Search</h3>
          </div>
          <br />
          <br />
          <Form>
            <div className="ui grid">
              <div className="eight wide column">
                <p>Role</p>
              </div>
              <div className="eight wide column">
                <p># of Positions</p>
              </div>
            </div>
            <Divider />
            <div className="ui grid">
              <div className="eight wide column">
                <Form.Input
                  name="reviewer"
                  placeholder="Reviewer"
                  fluid
                  value={this.state.reviewerSearch.name}
                  onChange={this.handleSearchFilterChange}
                />
              </div>
              <div className="eight wide column">
                <Dropdown
                  options={this.state.options}
                  placeholder="Enter # of Positions"
                  search
                  selection
                  fluid
                  allowAdditions
                  value={reviewPositions}
                  onAddItem={this.handleReviewPositionAddition}
                  onChange={this.handleReviewPositionChange}
                />
              </div>
            </div>
            {reviewPositions > 0 && (
              <div className="inline fields">
                <Form.Field>
                  <Radio
                    label="By Skills"
                    name="radioGroup"
                    value="bySkills"
                    checked={value === 'bySkills'}
                    onChange={this.handleSearchCategoryChange}
                  />
                </Form.Field>
                <Form.Field>
                  <Radio
                    label="By Reviewer"
                    name="radioGroup"
                    value="byReviewer"
                    checked={value === 'byReviewer'}
                    onChange={this.handleSearchCategoryChange}
                  />
                </Form.Field>
              </div>
            )}
            {value === 'bySkills' && (
              <div>
                <div className="ui grid">
                  <div className="two wide column">
                    <p>Role</p>
                  </div>
                  <div className="two wide column">
                    <p># of days required</p>
                  </div>
                  <div className="two wide column">
                    <p>From Date</p>
                  </div>
                  <div className="two wide column">
                    <p>To Date</p>
                  </div>
                  <div className="two wide column">
                    <p>Language Skills</p>
                  </div>
                  <div className="four wide column">
                    <p>Content Area Skills</p>
                  </div>
                  <div className="two wide column">
                    <p>Other Skills</p>
                  </div>
                </div>
                <Divider />
                {this.showSkillsModalCategoryUI()}
              </div>
            )}
            {value === 'byReviewer' && (
              <div>
                <div className="ui grid">
                  <div className="three wide column">
                    <p>Name</p>
                  </div>
                  <div className="three wide column">
                    <p># of days required</p>
                  </div>
                  <div className="four wide column">
                    <p>From Date</p>
                  </div>
                  <div className="six wide column">
                    <p>To Date</p>
                  </div>
                </div>
                <Divider />
                {this.showReviewModalCategroyUI()}
              </div>
            )}
            {!showNextButton &&
              reviewPositions > 0 &&
              value !== '' && (
                <Form.Group width={2}>
                  <Form.Button
                    primary
                    label="&nbsp;"
                    content={'Next'}
                    onClick={() => {
                      this.setState({
                        showAddButton: true,
                      });
                      this.fetchData();
                    }}
                  />

                  <Form.Button
                    primary
                    label="&nbsp;"
                    content="Cancel"
                    onClick={() => {
                      this.setState(
                        {
                          reviewType: '',
                          granteeId: '',
                          reviewPositions: reviewPositions,
                          reviewerSearch: {
                            searchName: '',
                            searchCategory: '',
                            fromDate: null,
                            toDate: null,
                            noOfDays: null,
                            languageSkills: [],
                            contentAreaSkills: [],
                            otherSkills: [],
                          },
                        },
                        () => this.toggleModal()
                      );
                    }}
                  />
                </Form.Group>
              )}
          </Form>
        </Well>

        {/* Users Table */}
        {showAddButton && this.renderReviewersList()}

        {unscheduled &&
          value !== '' &&
          showAddButton &&
          unscheduled.length > 0 && (
            <Button
              primary
              content="Add"
              onClick={e => {
                if (e) e.preventDefault();

                const checked =
                  _.uniq(
                    this.state.filteredReviewers.map(reviewer => reviewer.value)
                  ) || [];
                this.setState({ reviewer: checked });
                this.props.selectedReviewers(checked);

                this.toggleModal();
              }}
            />
          )}
      </Modal>
    );
  };

  render() {
    return (
      <div className="row">
        {this.renderSearchModal()}

        <div className="col-xs-12">
          <div className="field">
            <div className="input-group">
              <Dropdown
                id="reviewer"
                style={{ height: '100%' }}
                className="form-control"
                label="Reviewers"
                name="reviewer"
                labeled
                placeholder="Select Reviewers"
                multiple
                selection
                search
                value={this.state.reviewer}
                options={this.state.filteredReviewers}
                onChange={(e, { name, value }) => {
                  this.props.selectedReviewers(value);
                  this.setState({ reviewer: value });
                }}
              />

              <div className="input-group-btn">
                <Button
                  primary
                  content="Add Reviewer Requirements"
                  onClick={e => {
                    if (e) e.preventDefault();
                    this.toggleModal();
                    this.fetchData();
                  }}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

我有两个问题。首先，即使设置了multiple={true}，我也无法获得渲染选项。

第二个是因为当我更改一个实际上使所有值都相同的for loop时，我要根据数字参数重复元素，所以我要在dropdown中传递。

当我在线Dropdown Allow Additions Example

时，它实际上可以工作