React中如何实现多选框单点击选/取消，无需Ctrl+Click

完全可以实现，核心思路和你之前的jQuery方案一致——阻止option的mousedown默认行为，手动切换选中状态并更新React状态。下面是适配你现有代码的实现方式：

import React, { useState } from "react";
import { Col, Form } from "react-bootstrap";

export default function App() {
  const [field, setField] = useState([]);

  const handleOptionMouseDown = (e) => {
    // 阻止原生需要Ctrl的多选逻辑
    e.preventDefault();
    const selectedValue = e.target.value;
    
    // 切换当前选项的选中状态
    setField(prevState => {
      if (prevState.includes(selectedValue)) {
        // 已选中则移除
        return prevState.filter(val => val !== selectedValue);
      } else {
        // 未选中则添加
        return [...prevState, selectedValue];
      }
    });
  };

  return (
    <Form.Group as={Col} controlId="my_multiselect_field">
      <Form.Label>My multiselect</Form.Label>
      <Form.Select 
        multiple 
        aria-label="Default select example" 
        value={field}
        // 保留onChange兼容键盘操作（如空格选中、方向键导航）
        onChange={e => setField([].slice.call(e.target.selectedOptions).map(item => item.value))}
      >
        <option value="field1" onMouseDown={handleOptionMouseDown}>Field 1</option>
        <option value="field2" onMouseDown={handleOptionMouseDown}>Field 2</option>
        <option value="field3" onMouseDown={handleOptionMouseDown}>Field 3</option>
      </Form.Select>
    </Form.Group>
  );
}

关键逻辑说明 #

• handleOptionMouseDown函数：通过e.preventDefault()禁用原生多选框的Ctrl+Click强制要求，然后根据当前点击选项的value，在state中切换它的选中状态（存在则移除，不存在则添加）。
• 保留原onChange事件：确保用户通过键盘操作时，状态依然能正确更新，兼顾操作的可访问性。

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