React中发生下拉组件onChange选择时如何清除自动完成文本框组件

Question

我有一个 React 应用程序，在父组件中有 2 个独立的组件：一个下拉组件 (SearchDropdown) 和一个自动完成文本框组件 (Autocomplete)。

 <div className="sidebar" style={{
      borderLeft: "1px solid gray"
 }}>
     <h2 style={{ textAlign: "center", color: "grey" }}>Filter By:</h2>
     <hr style={{ color: "grey", marginBottom: "20px" }} />
     <form onSubmit={(e) => {
         e.preventDefault();
         const { state } = autoCompleteRef.current;
         const keys = searchDropdownRef.current.state.userInput;
         callSearchAPI(state.userInput, keys);
     }}>
         <SearchDropdown ref={searchDropdownRef}
             onSearchDropdownChange={listHandler}
         />
         <hr style={{ color: "grey", marginBottom: "20px" }} />
         <label style={{ color: "grey" }}>Enter Value</label> <br />
         <Autocomplete ref={autoCompleteRef}
             suggestions={autoData}
             style={{ marginBottom: "10px" }} />
         <button className="btn btn-primary" > Search</button>
     </form>
 </div >

我在这里有一个适度的目标。每当下拉选择发生变化时，我想清除自动完成文本框中的所有文本。我尝试在 SearchDropdown 组件的 `onSearchDropdownChange 事件中调用的 listHandler() 函数中使用 DOM 选择器。此方法在浏览器控制台中有效：

 function listHandler(searchKey) {
    document.getElementById("autocomplete").value = "";
    setKey(searchKey);
    const auto_key = { searchKey };
    let temp = "";
    if (auto_key.searchKey == 'name') {
        temp = { namesData };
        return setAutoData(temp.namesData);
    } else if (auto_key.searchKey == 'title') {
        temp = { titleData };
        return setAutoData(temp.titleData);
    } else if (auto_key.searchKey == 'email') {
        temp = { emailData };
        return setAutoData(temp.emailData);
    } else if (auto_key.searchKey == 'phone') {
        temp = { phoneData };
        return setAutoData(temp.phoneData);
    } else if (auto_key.searchKey == 'county') {
        temp = { countyData };
        return setAutoData(temp.countyData);
    } else if (auto_key.searchKey == 'affiliation') {
        temp = { affiliationData };
        return setAutoData(temp.affiliationData);
    } else {
        return setAutoData([]);
    }
}

为什么这在代码中不起作用，但在浏览器中却起作用？如何在下拉选择更改时清除此文本框？

Answer 1

为了解决这个问题，我首先必须在我的自动完成组件中添加一个 handleReset 函数：

class Autocomplete extends Component {
constructor(props) {
    super(props);
    this.state = {
        activeSuggestion: 0,
        filteredSuggestions: [],
        showSuggestions: false,
        userInput: ""
    };
}

handleReset = () => {
    this.setState({
        userInput: ""
    });
};

在我的父组件中，我已经添加了 useRef() 来引用我的 Autocomplete 和 SearchDropdown 组件。

export const Table = () => {
//For Sidebar Search
    const autoCompleteRef = useRef();
    const searchDropdownRef = useRef();

然后，当 SearchDropdown 组件选择更改时，我调用了我原来的 listHandler 函数，并使用 AutocompleteRef 添加了对 handleReset 函数的引用，如下所示：

 function listHandler(searchKey) {
    document.querySelector('input[id=autocomplete]').value = "";
    autoCompleteRef.current.handleReset();
    ...
 }

现在有效。

React中发生下拉组件onChange选择时如何清除自动完成文本框组件

How to clear an autocomplete textbox component when dropdown component onChange selection occurs in React

javascript

forms

components

textbox

reactjs