React Jsx 检查属性被覆盖

Question

我在这里尝试制作一个复选框，以便能够 select 和重置。 *因为它是一个弹出窗口，它应该能够通过点击更新，而不是在重新渲染之后。

最初，当我将'checked'作为{ checked }放入UserListElement.tsx时，复选框能够正常select。但是我也需要一个重置功能，所以我添加了 isReset 属性并将 UserListElement.tsx 中的 'checked' 值更改为 {handleOnCheck}.

现在 selected 时，单选按钮未selected

但是当我单击 'reset' 时，之前 selected 的项目现在似乎是 selected，而一切都应该取消选中（false）。

感谢您的所有帮助。

UserList.tsx

export const UserList = (props: {
    showsUserList: boolean;handleClose: () => void;corporationId: string;currentUserId: string;samePerson: boolean;twj: string;
  }) => {
    const [isReset, setReset] = useState(false);
    .......
    const resetAll = () => {
      setReset(true);
      setCount((addedUserList.length = 0));
      setAddedUserList([]);
      setUserName('');
    };
    ......
    return ( <
      > < div > xxxxx <
      ul className = {
        `option-module-list no-list option-module-list-member ${style.personListMember}`
      } > {searchedUserList.map((user, i) => ( 
      <UserListElement user = { user }
          handleOnMemberClicked = { handleOnMemberClicked }
          isReset = { isReset }
          key = {i} />
        )) }
        </ul> 
      /div>
    <a className="is-secondary reservation-popup-filter-reset" onClick={resetAll}>
      .....
    }

UserListElement.tsx

export const UserListElement = ({
  user,
  handleOnMemberClicked,
  isReset,
}: {
  user: UserDetail;
  handleOnMemberClicked: (checked: boolean, userId: string | null) => void;
  isReset: boolean;
}) => {
  const [checked, setChecked] = useState(false);
  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
    const checkedState = e.target.checked;
    setChecked(checkedState);
    handleOnMemberClicked(checkedState, user.userId);
  };
  const handleOnCheck = useMemo(() => {
    if (isReset) {
      setChecked(false);
    }
    return checked;
  }, [isReset]);
  return (
    <li>
      <label className={style.checkboxLabel}>
        <input type="checkbox" className={style.checkboxCircle} checked={handleOnCheck} onChange={(e) => handleOnChange(e)} />
        <span>{user.name}</span>
      </label>
    </li>
  );
};

Answer 1

你的问题是你在 useMemo 中 return checked 变量的旧值（当你 return 它时状态没有更新 checked ）。我将消除 useMemo 以及 handleOnCheck 变量，并简单地依赖于通过 useEffect 检查的更新。见下文：

useEffect(()=> {
   if(isReset) setChecked(false)
 }, [isReset])

然后简单地通过检查输入：

<input type="checkbox" className={style.checkboxCircle} checked={checked} onChange={(e) => handleOnChange(e)} />

useMemo 只会在 isReset 更改时运行一次，并且由于您 return 使用过时的值，因此您的状态不会更新。

React Jsx 检查属性被覆盖

React Jsx checked property got override

javascript

checkbox

reactjs

react-hooks

use-effect

React Jsx 检查 属性 被覆盖

React Jsx checked property got override

javascript

checkbox

reactjs

react-hooks

use-effect

React Jsx 检查属性被覆盖