时间戳

首页 > 解决方案 > React中发生下拉组件onChange选择时如何清除自动完成文本框组件

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

问题描述

我有一个 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 >

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

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

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

标签： javascriptreactjsformstextboxcomponents

解决方案

为了解决这个问题，我首先必须在我的 Autocomplete 组件中添加一个 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();

然后，当组件选择发生更改时，我调用了我的原始listHandler函数，并使用如下方式添加了对函数的引用：SearchDropdownhandleResetAutocompleteRef

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

现在可以了。

推荐阅读