Question

我是新手，所以如果有明显的解决方案，我会提前道歉。但是我正在尝试创建一个可重用的搜索组件，在这个搜索组件中，我有一个 input 字段，我想在点击时更改边框。

目前，此 css onClick 函数仅在第二次点击后才起作用。我的控制台中没有出现任何错误，因此我目前不知道解决方案是什么。我曾尝试进行一些研究，但没有成功。

这是我的代码：

    const searchBorderChange= () => {
        var textareas = document.getElementsByTagName('input');
    
        for (let i=0; i<textareas.length; i++){
            // you can omit the 'if' if you want to style the parent node regardless of its
            // element type
            if (textareas[i].parentNode.tagName.toString().toLowerCase() == 'div') {
                textareas[i].onfocus = function(){
                    this.parentNode.style.borderColor  = '#FF0000';
                }
                textareas[i].onblur = function(){
                    this.parentNode.style.borderColor = '#B9C0D0';
                }
            }
        }
    }

const SearchBar= () => (

    <div className="search-nav">
        <h1 className="padding-bottom">Search
            <br /> Here <span className="text-bold">Lookup Keywords</span></h1>
        <div>
            <div className="content">
                <div className="search-bar">
                    <i className="fas search fa-search"></i>
                    <input type="text" name="search" placeholder="Search by Keyword" onClick={searchBorderChange} />
                </div>
            </div>
        </div>
    </div>
);

export default SearchBar;

我希望我的搜索 div 的边框在第一个 onClick 函数上发生变化。

Answer 1

如果可以避免，最好不要在 React 中手动更改文档。您可以将 input 边框颜色保留在状态变量中，并在聚焦或模糊时更改它。

示例

const { useState } = React;

const defaultColor = "#B9C0D0";

const SearchBar = () => {
  const [inputColor, setInputColor] = useState(defaultColor);
  
  return (
    <div className="search-nav">
      <h1 className="padding-bottom">
        Search
        <br /> Here <span className="text-bold">Lookup Keywords</span>
      </h1>
      <div>
        <div className="content">
          <div className="search-bar">
            <i className="fas search fa-search"></i>
            <input
              type="text"
              name="search"
              placeholder="Search by Keyword"
              style={{ border: `1px solid ${inputColor}` }}
              onFocus={() => setInputColor("#FF0000")}
              onBlur={() => setInputColor(defaultColor)}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

ReactDOM.render(<SearchBar/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Reactjs - onClick 在第一次点击后工作

1 个答案: