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

Question

I have a form which performs an event on submit.

The form contains a textarea, that when you click on it, the submit button appears, and when you click out it disappears (using onFocus and onBlur for this to flag variable '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>

The onBlur event is blocking the button to be clicked and therefore to submit the form.

I read about using onMouseDown event in the button, and it does work, but it does not capture the form event. And I really need to pass the form event to the "handleSubmitForm" to be able to retrieve the form data..

Does anybody know how I could work this out? Thanks!

Answer 1

I reproduced this and solved it this way:

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;