javascript - 我对“焦点”事件和“模糊”事件有疑问

很抱歉标题模棱两可。用一句话很难解释这个问题。
首先，我的代码结构如下（使用JSX）

<Parent>
    <EditableText1 />
    <EditableText2 />
</Parent>

以下是我希望它的工作方式：
在默认状态下，ET2（EditableText2）的“display”为“none”
当'Parent'是'Focus'时，ET2的'display'值变为'flex'
当“Parent”为“Blur”时，ET2的“display”值再次变为“none”
换言之，如果选择了ET1（ET1可见），则ET2可见，并且可以在该状态下编辑ET2。
以下是我的尝试：
（一）

<Parent
onFocus={() => { this.setState({ visible: 'flex' }) }}
onBlur={() => { this.setState({ visible: 'none' }) }>
    <EditableText1 />
    <EditableText2 className={css`
display: ${this.state.visible};
`/>
</Parent>

这里的问题是：

当ET1变成“焦点”时，ET2出现。但是，如果我尝试选择ET2，ET1将变为“模糊”，因此ET2的“显示”将变为“无”。所以我不能选择ET2！
2个）
所以当ET1模糊时，我试着防止冒泡：

<Parent
onFocus={() => { this.setState({ visible: 'flex' }) }}
onBlur={() => { this.setState({ visible: 'none' }) }>
    <EditableText1
onBlur={(e) => { e.stopPropagation() }}
/>
    <EditableText2 className={css`
display: ${this.state.visible};
`/>
</Parent>

这个案子的问题是：

现在可以在ET1聚焦后选择ET2。
但是，
如果从ET1模糊到父级之外，则ET2的“display”不会更改为“none”。

如果从ET2模糊外部父对象，“display”将变为“none”（我希望它的工作方式）。
我不知道该怎么办了。似乎是因为我缺乏知识。有人能给我个建议吗？

最佳答案

这是一个可能的解决办法。这不是最漂亮的，但我工作。主要思想是存储状态中有焦点的元素。当模糊事件发生在ET1元素上时，你需要检查ET2是否有焦点。为此，您需要创建一个延迟，因为模糊事件将在焦点事件之前触发。如果没有这个延迟，说明哪个元素有焦点的状态将不会被更新。

import React from "react";

export default class myClass extends React.Component {
  constructor() {
    super();
    this.beforeBlur = this.beforeBlur.bind(this);
    this.update = this.update.bind(this);
    this.state = {
      whoHasFocus: "none",
      visible: "none"
    };
    this.delay = null;
  }

  beforeBlur(obj) {
    const that = this;
    this.delay = setInterval(() => {
      if (this.state.whoHasFocus !== "ET2") {
        this.update(obj);
      }
      clearInterval(that.delay);
    }, 10);
  }
  update(obj) {
    this.setState(obj);
  }
  render() {
    return (
      <div>
        <input
          type="text"
          onBlur={() => {
            this.beforeBlur({
              visible: "none",
              whoHasFocus: "none"
            });
          }}
          onFocus={() => {
            this.update({
              visible: "flex",
              whoHasFocus: "ET1"
            });
          }}
        />
        <input
          type="text"
          style={{ display: `${this.state.visible}` }}
          onFocus={() => {
            this.update({ whoHasFocus: "ET2" });
          }}
          onBlur={e => {
            this.update({
              visible: "none",
              whoHasFocus: "none"
            })
          }}
        />
      </div>
    )
  }
}

我希望这对你有帮助。

关于javascript - 我对“焦点”事件和“模糊”事件有疑问，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52605194/