关于在React JS 中Event Handler的使用细节

一般而言，使用Onchange这种Event Handler，需要使用e.stopPropagation();

具体代码如下

export const handleOnchange = (setStateMethod) => (e) => {
  e.stopPropagation();
  const { name, value } = e.target;
  setStateMethod((preState) => {
    return { ...preState, [name]: value };
  });
};

具体到使用Checkbox，需要使用另外的方法，因为CheckBox 的值只能为Boolean，所以代码如下

  const handleOnChange = (e, isCheckBox) => {
    const { name, value } = e.target;
    e.stopPropagation();
    if (isCheckBox) {
      setUserAccessLevel((preState) => {
        return { ...preState, [name]: !preState[name] };
      });
      return;
    }
    setUserAccessLevel((preState) => {
      return { ...preState, [name]: value };
    });
  };