如何允许重复显示不同值的语义ui下拉列表

Question

我在React Component中有一个方法，根据数字值显示一行组件。我遇到的问题是当我选择组件时，在该组件中为不同的行选择相同的值。

这是我的代码

showSkillsModalCategoryUI = () => {
    const {
      startDate,
      endDate,
      errors,
      reviewerSearch: {
        contentAreaSkills,
        otherSkills,
        numOfDaysForReview,
        numOfReviewerPositions,
      },
    } = this.state;

    var data = [];
    var length = numOfReviewerPositions; // 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="three wide column">
              <Form.Field
                name="numOfDaysForReview"
                label=""
                placeholder="# of days"
                value={numOfDaysForReview}
                onChange={this.handleSearchFilterChange}
                category={'numOfDaysForReview'}
                control={AmsLookupDropdown}
                fluid
                search
                selection
              />
            </div>
            <div className="four 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">
              <Form.Field
                name="languageSkills"
                label=""
                placeholder="Language"
                defaultValue={'English'}
                onChange={(e, { value }) =>
                  this.setState({
                    ...this.state,
                    reviewerSearch: {
                      ...this.state.reviewerSearch,
                      languageSkills: value,
                    },
                  })
                }
                category={'languages'}
                control={AmsLookupDropdown}
                fluid
                multiple
                search
                selection
              />
            </div>
            <div className="three wide column">
              <Form.Field
                error={!!errors.contentAreaSkills}
                name="contentAreaSkills"
                label=""
                placeholder="Content"
                value={contentAreaSkills}
                onChange={(e, { value }) =>
                  this.setState({
                    ...this.state,
                    reviewerSearch: {
                      ...this.state.reviewerSearch,
                      contentAreaSkills: value,
                    },
                  })
                }
                category={'contentAreaSkills'}
                control={AmsLookupDropdown}
                fluid
                multiple
                search
                selection
              />
            </div>
            <div className="three wide column">
              <Form.Field
                name="otherSkills"
                width={14}
                label=""
                placeholder="Other"
                value={otherSkills}
                onChange={(e, { value }) =>
                  this.setState({
                    ...this.state,
                    reviewerSearch: {
                      ...this.state.reviewerSearch,
                      otherSkills: value,
                    },
                  })
                }
                category={'otherSkills'}
                control={AmsLookupDropdown}
                fluid
                multiple
                search
                selection
              />
            </div>
          </div>
        </div>
      );
    });
    return row;
  };

例如，如果我有3行这些组件，我选择像英语这样的语言。每行中的所有语言控件都将使用英语，如果我尝试在每行中更改它们，则所有语言控件都会更改。所以我不能选择一个单独的价值。

Answer 1

你的所有行都使用相同的状态，你需要创建一个状态数组来获取地图的索引，所以每一行都有一个独立的状态，例如：

 onChange={(e, { value }) =>
      this.setState({
      ...this.state,
     ['stateOfRow' + index]: theState ....
   )
 }

您明白了，如果每个行都设置了自己的行，那么您的行不必共享相同的状态。

要将此应用于您的案例，代码将如下所示：

国家：

  const {
    startDate,
    endDate,
    errors,
    rowState // <== this is an Array []
  } = this.state;

如果代码部分：

    <Form.Field
      name="otherSkills"
      width={14}
      label=""
      placeholder="Other"
      value={rowState[index].reviewerSearch.otherSkills}
      onChange={(e, { value }) => {
        this.setState(prevState => ({
          rowState: [
           ...prevState,
           [rowState[index]],
           {
             reviewerSearch: {
              ...prevState.rowState[index].reviewerSearch,
              otherSkills: value,
            },
           },
          ],
        }));
      }}
      category={"otherSkills"}
      control={AmsLookupDropdown}
      fluid
      multiple
      search
      selection
    />