如何使用 javascript 模糊输入字段或做出反应？

Question

我是编程新手，我想模糊“文本”类型的输入元素。

我想做什么？ 我在一个反应​​组件中有一个输入元素，那就是使用 querySelector 获得焦点。现在在其他组件中，我想从同一个输入元素中移除焦点。

我已经尝试使用带有模糊方法的 querySelector。但没用。

下面是我的代码，

 class Popup extends React.PureComponent {
     render() {
         return {
             <OverlayComponent 
                    <input
                        type="text"/>
             </OverlayComponent>
         }
     }
 }

 class OverlayComponent extends React.PureComponent {
     constructor(props) {
         super(props);
         this.element = document.createElement('div');
     }
     componentDidMount() {
         const input = this.element.querySelector
                       ('input:not([type=button]),
                       input:not([type=submit])
                       :not([type=file]),
                       textarea');
         input && input.focus();
     }

     render() {
         return {
             //something
         }
     }
 }


 class Anothercomponent extends React.PureComponent {
     componentDidMount() {
          const input = document.querySelector
                        ('input:not([type=button]),
                        input:not([type=submit])
                        :not([type=file]),textarea');
          input && input.blur();
     }
 }

输入元素在 overlyacomponent 中获得焦点，但没有为 AnotherComponent 中的输入元素移除焦点..OverlayComponent 和 AnotherComponent 在同一页面中看到。

谁能让我知道我哪里出错了。谢谢。

编辑： 如何在 AnotherComponent 中使用 setTimeout 方法从输入元素中移除焦点。

Answer 1

我会在普通的 javascript 中做这样的事情：

function BlurTheThing() {
     var TheThing = document.getElementsByClassName(".ClassNameOfTheThing").click(function) {
        TheThing.blur();
     };
}

如果你不反对一点 jQuery，或者这个

function BlurTheThing() {
    $(".ClassNameOfTheThing").click(function () { 
        $(this).blur();
    }
}

自从我展示以来，我一直使用的一个技巧是，为了确保您选择正确的东西，请尝试随时使用 javascript 或 jQuery 更改您尝试选择的东西的边框颜色。从你点击的东西开始：

function BlurTheThing() {
    $(".ClassNameOfTheThing").click(function () { 
        // get the element you just clicked
        var TheThingYoureTryingToSelect = $(this);
        // and set it's border to a color that will stand out
        TheThingYoureTryingToSelect.css("border", "thin solid red");
    }
}

确保你期望的元素的边框颜色改变了，然后再次做同样的事情，除了这次根据需要选择元素的父（或子或兄弟）：

function BlurTheThing() {
    $(".ClassNameOfTheThing").click(function () { 
        // get the parent of the element you just clicked
        var TheThingYoureTryingToSelect = $(this).parent();
        // and set it's border to a color that will stand out
        TheThingYoureTryingToSelect.css("border", "thin solid red");
    }
}

您可以堆叠它们并继续前进，例如$(this).parent().parent() 或$(this).parent().sibling() 等。通过这种方式，您可以浏览 DOM 并确保您选择了您想要选择的东西。或者您可以尝试.find(".ClassNameOfTheThing") 看看是否适合您。

无论哪种方式，一旦您确定选择了您要选择的东西，blur() 应该可以工作。

Answer 2

为什么要使用查询选择器？

React 并不是真正为使用 Vanilla dom 操作而构建的。

您应该使用 react dom-manipulation，例如，使用 state 或 props 来更新输入。

为了方便起见，您可能还想使用钩子（这允许您摆脱类并在同一上下文中拥有多个函数（每个函数都返回 JSX），每个函数都有自己的“状态”）。