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

Question

我有 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
        })
    }

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

标签： javascripthtmlarraysreactjsmapping

Answer 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>
  })
}