ReactJS中如何根据Select选项值切换对应Modal

1. 添加状态存储选中类型 #

在现有状态逻辑中新增一个状态，用来保存用户选择的内容类型：

const [selectedType, setSelectedType] = useState('');

2. 给Select绑定 onChange 事件 #

修改第一个Modal里的<select>元素，添加onChange事件来实时更新选中值，同时给默认选项补上空value方便判断：

<select 
  className="form-select lm-border" 
  id="whatToAdd" 
  aria-label="Default select example"
  onChange={(e) => setSelectedType(e.target.value)}
>
  <option value="">Select</option>
  <option value="journalArticle">Journal Article</option>
  <option value="books">Books</option>
  <option value="caseLaw">Case Law</option>
  <option value="insights">Insights</option>
</select>

3. 修改Next按钮的点击逻辑 #

替换原有的addContributeBook函数，改为根据选中值判断要打开的Modal：

const handleNext = () => {
  setContribute(false); // 关闭第一个Modal
  switch(selectedType) {
    case 'books':
      setContributeBook(true);
      break;
    case 'insights':
      setContributeInsight(true);
      break;
    default:
      alert('Please select a valid option');
      setContribute(true); // 未选有效选项时重新打开第一个Modal
  }
};

同时把Next按钮的onClick替换成这个新函数：

<button className="btn-next" onClick={handleNext}>
  Next
</button>

4. 修正状态逻辑中的函数名（笔误修复） #

你的代码里存在函数名不匹配的问题，统一修正如下：

const closeContributeBook = () => setContributeBook(false);
const closeContributeInsight = () => setContributeInsight(false);

完整修改后的状态逻辑 #

const [contribute, setContribute] = useState(false);
const [contributeBook, setContributeBook] = useState(false);
const [contributeInsight, setContributeInsight] = useState(false);
const [selectedType, setSelectedType] = useState('');

const closeContribute = () => setContribute(false);
const addContribute = () => setContribute(true);

const closeContributeBook = () => setContributeBook(false);
const closeContributeInsight = () => setContributeInsight(false);

const handleNext = () => {
  setContribute(false);
  switch(selectedType) {
    case 'books':
      setContributeBook(true);
      break;
    case 'insights':
      setContributeInsight(true);
      break;
    default:
      alert('Please select a valid option');
      setContribute(true);
  }
};

完成以上修改后，点击Next按钮时会根据用户选择的选项打开对应Modal，未选择有效选项时会弹出提示并保留第一个Modal。

内容的提问来源于stack exchange，提问作者Shawn