隐藏选择框中已选择的选项 ReactJS

Posted 2023-03-17

【中文标题】隐藏选择框中已选择的选项 ReactJS

【英文标题】：Hiding options already selected in a select box ReactJS

【发布时间】：2021-08-21 18:12:57

【问题描述】：

我有 3 个选择框都填充了相同的选项值。用户可以设置安全问题，因此用户从每个选择框中选择他们想要的每个问题并回答它。我进行了一个 API 调用来接收安全问题并将它们存储在一个名为“securityQuestions”的数组中。现在我想要实现的是，当用户从任何下拉列表中选择一个问题时，选择的问题对其余部分隐藏选择框，以避免用户两次回答相同的问题。这就是我显示问题和接收用户输入的方式

<div className="form-group">
                <div className="col-sm-12 col-md-8 col-lg-8">          
                  <select 
                    className="form-control"
                    onChange = onChange
                    name = "question1Id"
                    required
                  >

                  <option value="">Select first security question</option>
                    
                         
                            securityQuestions ?
                            securityQuestions.map((question, i)=>
                              return  <option
                                    value=question.id
                                    key=i
                                >
                                    question.name
                                </option>
                            )
                            :
                            null
                        
                 </select>
                </div>
              </div> 

              <div className="form-group">
                <div className="col-sm-12 col-md-8 col-lg-8">          
                  <input 
                    type="text" 
                    className="form-control" 
                    required="required"
                    placeholder="Answer 1"
                    name="answer1"
                    onChange=onChange
                  />
                </div>
              </div> 

              <div className="form-group">
                <div className="col-sm-12 col-md-8 col-lg-8">          
                  <select 
                    className="form-control"
                    onChange = onChange
                    name = "question2Id"
                    required
                  >

                  <option value="">Select second security question</option>
                    
                         
                            securityQuestions ?
                            securityQuestions.map((question, i)=>
                              return  <option
                                    value=question.id
                                    key=i
                                >
                                    question.name
                                </option>
                            )
                            :
                            null
                        
                 </select>
                </div>
              </div> 

              <div className="form-group">
                <div className="col-sm-12 col-md-8 col-lg-8">          
                  <input 
                    type="text" 
                    className="form-control" 
                    required="required"
                    onChange=onChange
                    placeholder="Answer 2"
                    name="answer2"
                  />
                </div>
              </div>

这是我的 onChange 函数：

    const onChange =(e)=>
        let name = e.target.name;
        let value = e.target.value;
        setState(
            ...state,
           [ e.target.name]: e.target.value
        )
    

请我如何实现，当从第一个选择下拉列表中选择一个选项时，它会隐藏在第二个选择下拉列表中

【参考方案1】：

一种方法是过滤您的securityQuestions。极其天真：

 securityQuestions &&
  securityQuestions.map((question, i)=> 
    if (question.id === question1Id || question.id === question2Id) 
      return null;
    
    return  <option
      value=question.id
      key=i
    >
      question.name
    </option>
  )

【参考方案2】：

过滤问题..

这是一个例子https://codesandbox.io/s/frosty-water-xsgjc?file=/src/App.js