javascript - 如何使用 javascript 模糊输入字段或使用react？

Question

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

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

我试过使用 querySelector with blur 方法。但没有用。

下面是我的代码，

 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();
     }
 }

input 元素在 overlyacomponent 中获得焦点，但不会移除 AnotherComponent 中 input 元素的焦点..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() 应该会起作用。