javascript - 按钮的点击处理程序中的 react 状态更改阻止表单提交

Question

考虑下面的代码:

function Item({name, _key})
{
   console.log('rendering Item')
   const [updatingName, setUpdatingName] = useState(false);
   const nameInputElement = useRef();

   useEffect(() => {
      if (updatingName) {
         nameInputElement.current.focus();
      }
   }, [updatingName]);

   function onUpdateClick() {
      setUpdatingName(true);
   }

   function onCancelClick() {
      setUpdatingName(false);
   }

   return (
      <div>
         <input ref={nameInputElement} type="text" defaultValue={name} name="name"
         disabled={!updatingName} />

         {!updatingName
         ? <>
            <button key={1} type="button" onClick={onUpdateClick}>Update</button>
            <button key={2} type="submit" name="delete" value={_key}>Remove</button>
         </>
         : <>
            <button key={3} type="submit" name="update" onClick={(e) => {setUpdatingName(false)}}>Save</button>
            <button key={4} type="button" onClick={onCancelClick}>Cancel</button>
         </>}
      </div>
   )
}

function ItemList({title})
{
   return <>
      <h1>{title}</h1>
      <form method="post" onSubmit={(e) => {console.log('submitting');e.preventDefault()}}>
         <Item name={'small'} _key={0} />
      </form>
   </>
}

export default ItemList;

我面临的问题是点击 Save按钮。单击它时，如您所见，我触发了状态更改。但同时，我也想让按钮引起底层<form>的提交。

(为了检查表单是否已提交，我阻止了它的默认 submit 机制，而是使用了一个简单的日志。)

但是，似乎是从 onClick 中执行状态更改时的情况。 Save 的处理程序按钮，它停止提交表单。如果我从处理程序中删除状态更改，它就会提交表单。

为什么会这样？

Live CodeSandbox demo

Answer 1

当您在 save 按钮的点击处理程序中调用 setUpdatingName(false) 时，该按钮会在提交前从 DOM 中删除。您可以添加在 ItemList 中显示按钮的逻辑，如下所示:

function ItemList({ title }) {
  const [updatingName, setUpdatingName] = useState(false);
  return (
    <>
      <h1>{title}</h1>
      <form
        method="post"
        onSubmit={(e) => {
          e.preventDefault();
          setUpdatingName(false);
          console.log("submitting");
        }}
      >
        <Item
          name={"small"}
          _key={0}
          updatingName={updatingName}
          setUpdatingName={setUpdatingName}
        />
      </form>
    </>
  );
}

export default ItemList;

function Item({ name, _key, updatingName, setUpdatingName }) {
  console.log("rendering Item");

  const nameInputElement = useRef();

  useEffect(() => {
    if (updatingName) {
      nameInputElement.current.focus();
    }
  }, [updatingName]);

  function onUpdateClick() {
    setUpdatingName(true);
  }

  function onCancelClick() {
    setUpdatingName(false);
  }

  return (
    <div>
      <input
        ref={nameInputElement}
        type="text"
        defaultValue={name}
        name="name"
        disabled={!updatingName}
      />

      {!updatingName ? (
        <>
          <button key={1} type="button" onClick={onUpdateClick}>
            Update
          </button>
          <button key={2} type="submit" name="delete" value={_key}>
            Remove
          </button>
        </>
      ) : (
        <>
          <button key={3} type="submit" name="update">
            Save
          </button>
          <button key={4} type="button" onClick={onCancelClick}>
            Cancel
          </button>
        </>
      )}
    </div>
  );
}

此外，您可以使用 useTransition要求 React 延迟状态更新，以便先提交:

function Item({ name, _key }) {
  console.log("rendering Item");
  const [isPending, startTransition] = useTransition();
  const [updatingName, setUpdatingName] = useState(false);
  const nameInputElement = useRef();

  useEffect(() => {
    if (updatingName) {
      nameInputElement.current.focus();
    }
  }, [updatingName]);

  function onUpdateClick() {
    setUpdatingName(true);
  }

  function onCancelClick() {
    setUpdatingName(false);
  }

  return (
    <div>
      <input
        ref={nameInputElement}
        type="text"
        defaultValue={name}
        name="name"
        disabled={!updatingName}
      />

      {!updatingName ? (
        <>
          <button key={1} type="button" onClick={onUpdateClick}>
            Update
          </button>
          <button key={2} type="submit" name="delete" value={_key}>
            Remove
          </button>
        </>
      ) : (
        <>
          <button
            key={3}
            type="submit"
            name="update"
            onClick={(e) => {
              startTransition(() => setUpdatingName(false));
            }}
          >
            Save
          </button>
          <button key={4} type="button" onClick={onCancelClick}>
            Cancel
          </button>
        </>
      )}
    </div>
  );
}