Question

optionResultTask:[{label:"ApiTest1",value:"1111"},label:"ApiTest2",value:"2222"},{label:"ApiTest3",value:"3333"}]

<Select                                         
      options={optionResultTask}
      name="taskTitle1"
      onChange={this.handleTaskResultStatus}                                         
      value={resultTitle}                                        
      placeholder="Title"
      // isDisabled
     />

  <Select                                         
      options={optionResultTask}
      name="taskTitle2"
      onChange={this.handleTaskResultStatus}                                         
      value={resultTitle}                                        
      placeholder="Title"
      // isDisabled
     />

嗨，我对React真的很陌生。所以我的问题是“ taskTitle1”和“ taskTitle2”中的选项如何同步。

例如，如果已将“ taskTitle1”中的“选择”选择为（ApiTest1），则不能与“ taskTitle1”相同地选择“ taskTitle2”，因此选项应显示为 ApiTest2 和 ApiTest3 。

Answer 1

您可以为两个选择项提供一系列过滤掉的选项。

我注意到您的两个组件都使用相同的值resultTitle。由于我认为这是拼写错误，因此我将其名称替换为resultTitle1和resultTitle2

代码：

<Select                                         
    options ={optionResultTask.filter(option => option.value !== resultTitle2)}
    name="taskTitle1"
    onChange={this.handleTaskResultStatus}                                         
    value={resultTitle1}                                        
    placeholder="Title"
    // isDisabled
    />

<Select                                         
    options={optionResultTask.filter(option => option.value !== resultTitle1)}
    name="taskTitle2"
    onChange={this.handleTaskResultStatus}                                         
    value={resultTitle2}                                        
    placeholder="Title"
    // isDisabled
    />

反应选择选项与其他反应选择选项同步

1 个答案: