当按钮在 onBlur 事件中消失时，如何使表单提交工作？反应，下一个 js

Question

我有一个在提交时执行事件的表单。

表单包含一个文本区域，当你点击它时，提交按钮出现，当你点击它时它消失（使用 onFocus 和 onBlur 为此标记变量 'showSubmit'):

<form id="commentsForm" onSubmit={handleSubmitForm}>
      ...
         <textarea
             onFocus={onFocusShowSubmit}
             onBlur={onBlurHideSubmit}
             id="comment" name="comment" type="text" required></textarea>
          
         {showSubmit
             ?
             <button type="submit">Post Comment</button>
             : null}
</form>

onBlur 事件阻止按钮被点击并因此提交表单。

我读到过在按钮中使用 onMouseDown 事件，它确实有效，但它不捕获表单事件。我真的需要将 表单事件 传递给“handleSubmitForm”才能检索表单数据..

有谁知道我该如何解决这个问题？谢谢！

Answer 1

我转载了这个，然后这样解决了：

import React, { useState } from "react";

function Q1() {
  const [showSubmit, setShowSubmit] = useState(false);
  const [text, setText] = useState();

  const onFocusShowSubmit = () => {
    setShowSubmit(true);
  };

  const handleSubmitForm = (e) => {
    alert("Form Sent");
  };
  return (
    <div>
      <form id="commentsForm" onSubmit={handleSubmitForm}>
        ...
        <textarea
          onFocus={onFocusShowSubmit}
          onBlur={
            text && text.length >= 1
              ? () => setShowSubmit(true)
              : () => setShowSubmit(false)
          }
          id="comment"
          name="comment"
          type="text"
          required
          onChange={(e) => setText(e.target.value)}
        >
          {text}
        </textarea>
        {showSubmit ? <button type="submit">Post Comment</button> : null}
      </form>
    </div>
  );
}

export default Q1;

当按钮在 onBlur 事件中消失时，如何使表单提交工作？反应，下一个 js

How do I make a form submit work when button disappears on onBlur event? React, next js

html

form-submit

onblur

reactjs

react-hooks