Reactjs - onClick 在第一次點擊后工作

Question

我是新手，所以如果有明顯的解決方案，我會提前道歉。 但是我正在嘗試創建一個可重用的搜索組件，在這個搜索組件中，我有一個input字段，我想在單擊時更改邊框。

目前，這個 ZC7A62 onClick function 只有在第二次點擊后才能工作。 我的控制台沒有出現任何錯誤，所以我目前不知道解決方案是什么。 我試圖做一些研究，但我沒有運氣。

這是我的代碼：

    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 function 上發生變化。

Answer 1

如果可以避免，最好不要在 React 中手動更改文檔。 您可以將input邊框顏色保留在 state 變量中，並在聚焦或模糊時更改它。

例子

 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>