代码之家 › 专栏 › 技术社区 › Joji

如何在进行更改时禁用按钮,并在进行更改后启用它

reactjs javascript

Joji · 技术社区 · 4 年前

我在页面上有一个组件,它呈现了一堆复选框和切换。

我还有一个按钮叫 confirm 在底部保存更改并请求更新后端。

但是,我想支持一个功能,当用户没有对这些复选框或切换进行任何更改时 确认 按钮应禁用。当用户切换或选中其中任何一个时 确认 按钮已启用且可点击。

所以现在我正在做的是

const MyComponent = () => {
  const dispatch = useDispatch();
  // get the current state from the store
  const state = useSelector((state: RootState) => state.settings);

  const [isCheckbox1Checked, setCheckbox1] = useState(false);
  const [isCheckbox2Checked, setCheckbox2] = useState(false);
  const [isCheckbox3Checked, setCheckbox3] = useState(false);
  const [isConfirmBtnEnabled, setConfirmBtn] = useState(false);


  const [updateBtnEnabled, enableUpdateBtn] = useState(false);

  useEffect(() => {
    (async () => {
      // `getSettingsConfig` is a async thunk action
      await dispatch(getSettingsConfig());

      setCheckbox1(state.isCheckbox1Checked);

      setCheckbox2(state.isCheckbox2Checked);

      setCheckbox3(state.isCheckbox3Checked);
    })();
  }, [
    dispatch,

    state.isCheckbox1Checked,

    state.isCheckbox2Checked,

    state.isCheckbox3Checked
    // ..
  ]);

  return (
    <>
      <div className="checkboxes">
        <Checkbox1
          onCheck={() => {
            setCheckbox1(true);
            setConfirmBtn(true);
          }}
        />
        <Checkbox2
          onCheck={() => {
            setCheckbox2(true);
            setConfirmBtn(true);
          }}
        />
        <Checkbox3
          onCheck={() => {
            setCheckbox3(true);
            setConfirmBtn(true);
          }}
        />
      </div>
      <button disabled={!isConfirmBtnEnabled}>Confirm</button>
    </>
  );
};

现在看来效果不错,但需要手动发送垃圾邮件 setConfirmBtn 我在这个页面上的每个复选框和切换。我想知道是否有更好的方法。

我也考虑过使用 useEffect 拨打电话 isConfirmBtnEnabled 每次这些状态发生变化时。然而,由于初始状态是通过分派异步thunk从存储中导出的,因此在页面挂载后,这些复选框和切换的状态无论如何都会发生变化,这意味着我不能使用另一个 使用效果 倾听这些状态的变化。

0 回复 | 直到 4 年前

Boussadjra Brahim 4 年前

你可以使用 useEffect 挂钩以查看三个复选框并根据以下内容更新按钮状态 isConfirmBtnEnabled 它在内部更新 使用效果 挂钩:

useEffect(()=>{

   setConfirmBtn(isCheckbox1Checked || isCheckbox2Checked || isCheckbox3Checked)

},[isCheckbox1Checked,isCheckbox2Checked,isCheckbox3Checked])

编辑:


const MyComponent = () => {
  const dispatch = useDispatch();
  // get the current state from the store
  const state = useSelector((state: RootState) => state.settings);

  const [checkboxes, setCheckboxes] = useState({c1:false,c2:false,c3:false});
  const [isConfirmBtnEnabled, setConfirmBtn] = useState(false);


  const [updateBtnEnabled, enableUpdateBtn] = useState(false);

  useEffect(() => {
    (async () => {
      // `getSettingsConfig` is a async thunk action
      await dispatch(getSettingsConfig());
  [1,2,3].forEach(i=>{
        setCheckboxes({...checkboxes,[`c${i}`]:state[`isCheckbox${1}Checked`]})
      })
    
    })();
  }, [
    dispatch,

    state
    // ..
  ]);

   useEffect(()=>{
    setConfirmBtn(Object.values(checkboxes).reduce((a,c)=>(a=a || c),false))
   },[checkboxes])
  const _onCheck=(i)=>{
 setCheckboxes({...checkboxes,[`c${i}`]:tur})
   }
  return (
    <>
      <div className="checkboxes">
        <Checkbox1
          onCheck={() => _onCheck(1)}
        />
        <Checkbox2
         onCheck={() => _onCheck(2)}
        />
        <Checkbox3
          onCheck={() => _onCheck(3)}
        />
      </div>
      <button disabled={!isConfirmBtnEnabled}>Confirm</button>
    </>
  );
};