使用 onBlur 隐藏表单，但这与提交按钮有冲突答案

【问题标题】：Hidding a form with onBlur but this have a conflict with submit button使用 onBlur 隐藏表单，但这与提交按钮有冲突
【发布时间】：2018-09-21 21:45:17
【问题描述】：

我正在尝试使用 onBlur 事件隐藏表单，但是当我尝试单击提交按钮时，不会触发 onSubmit 函数

我想在发送表单后或当用户离开包装表单的 div 时隐藏它。

https://codesandbox.io/s/rrz10y2mnp

index.js

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

test.ts

import React, { Component } from "react";

export default class Test extends Component {
  state = {
    showing: false
  };

  showInput = () => {
    this.setState({ showing: false });
  };

  addNew = () => {
    this.setState({ showing: true });
  };

  sendForm = evt => {
    evt.preventDefault();
    console.log("clicked");
  };

  render() {
    return (
      <div>
        {!this.state.showing ? (
          <button onClick={this.addNew}>Add a new</button>
        ) : (
          <div onBlur={this.showInput} tabIndex="1">
            <form onSubmit={this.sendForm}>
              <input autoFocus={true} type="text" />
              <button type="submit">PUSH</button>
            </form>
          </div>
        )}
      </div>
    );
  }
}

【问题讨论】：

如果您不想在完成sendForm 之后隐藏表单，为什么不在sendForm 函数的末尾进行隐藏？
我将创建很多具有相同表单的卡片，这就是我想用 onBlur 事件隐藏它的原因
这并不妨碍您将表单隐藏在sendForm 中，如果确实如此，请解释
问题是当我尝试使用提交按钮时，onBlur事件触发而不执行onSubmit函数

标签： javascript reactjs

【解决方案1】：

在您拥有的 sendForm 函数中隐藏表单。那么应该没问题。如果 sendForm 中有一些异步功能，您可以在 promise 得到解决时 hideForm 并在此之前禁用输入。

【讨论】：

我会有很多卡片有相同的表单，我想在用户点击框外或用户提交表单时隐藏
如果用户在表单外点击会直接隐藏而不提交数据对吧？并在提交时将其隐藏。
问题是当我尝试使用提交按钮时，onBlur事件触发而不执行onSubmit函数

【解决方案2】：

问题是您在提交表单之前调用setState。您可以使用一些异步代码来解决此问题。这是一个简单的使用 setTimeout 并等待 100 毫秒的基本示例。有更好的方法可以做到这一点，还有很多你不应该这样做的原因。

   waitToSetState = () => {
     setTimeout(() => {
       this.setState({ showing: false });
     }, 100);
   };

...

   <div onBlur={this.waitToSetState} tabIndex="1">
     <form onSubmit={this.sendForm}>
       <input autoFocus={true} type="text" />
       <button type="submit">PUSH</button>
     </form>
   </div>

【讨论】：