javascript - 如何允许重复的反应语义 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 行这些组件，并且我选择了一种语言，例如英语。每行中的所有语言控件都将具有英语，如果我尝试在每一行上更改它们，它们都会改变。所以我不能选择一个单独的值。

标签： javascriptreactjssemantic-ui-react

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