模拟复选框上的“shift”按键以选择多行

问题描述

我有以下输入

 <input type="checkBox"  checked={isChecked}
  onChange={handleOnChange}/>

我的功能是这个

 const handleOnChange = () => {
  let element:any = document.querySelector('input');
 element.onkeydown = (e: { key: any; })  => alert(e.key);
element.dispatchEvent(new KeyboardEvent('keydown',{'key':'Shift'}));
  setIsChecked(!isChecked);


 
};

这个复选框是在我添加新行时动态创建的，我想模拟按住“shift”键，这样当我选中多个复选框时，这些行保持选中状态。

我正在使用 reactjs。

解决方法

没有本地方法可以做到这一点，但您可以根据您检查的索引实现它。

const checkboxes = new Array(20).fill(null);

export default function App() {
  const [checked,setChecked] = useState([]);
  const lastChecked = useRef(null);
  const handleChange = useCallback((e) => {
    const index = Number(e.target.dataset.index);

    if (lastChecked.current !== null && e.nativeEvent.shiftKey) {
      setChecked((prev) => {
        const start = Math.min(lastChecked.current,index);
        const end = Math.max(lastChecked.current,index);
        return uniq([...prev,...range(start,end),end]);
      });
      return;
    }
    if (e.target.checked) {
      lastChecked.current = index;
      setChecked((prev) => [...prev,index]);
    } else {
      lastChecked.current = null;
      setChecked((prev) => prev.filter((i) => i !== index));
    }
  },[]);

  return (
    <div>
      {checkboxes.map((_,i) => (
        <div key={i}>
          <label>
            <input
              checked={checked.includes(i)}
              data-index={i}
              type="checkbox"
              onChange={handleChange}
            />
            checkbox {i}
          </label>
        </div>
      ))}
    </div>
  );
}