使用第一个 Autocomplete 清除第二个 Autocomplete 的值答案

【问题标题】：Using first Autocomplete to clear the value of the second Autocomplete使用第一个 Autocomplete 清除第二个 Autocomplete 的值
【发布时间】：2020-04-12 17:46:02
【问题描述】：

我有以下代码。它显示两个自动完成控件。在第一个控件中选择的值决定了第二个控件的可能值。我的问题是，当在第一个控件上单击“清除”按钮时，它也应该清除第二个控件，因为它不再有效。第一个控件中的 OnChange 事件捕获“清除”事件并确实更改了第二个控件的基础选项列表，但显示的实际值仍然存在。如何以编程方式清除它？

import React, { Component } from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import NoSsr from '@material-ui/core/NoSsr';

export class Home extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            aiList: [], 
            ucList: [], 
            aiLoading: true, 
            ucLoading: true
        };
        this.handleAIChange = this.handleAIChange.bind(this);
    }

    componentDidMount() {
        fetch('http://localhost:8080/GetLeadAI')
        .then(res => res.json())
        .then(
            (data) => { this.setState({ aiList: data, aiLoading: false })},
            (error) => { this.setState({ aiLoading: false, error })}
        )
    }

    handleAIChange = (event, values, reason) => {
        if (reason==='select-option') {
            fetch(`http://localhost:8080/GetUc?AIID=${encodeURIComponent(values.id)}`)
            .then(res => res.json())
            .then(
                (data) => { this.setState({ ucList: data, ucLoading: false })},
                (error) => { this.setState({ ucLoading: false, error })}
            )
        }
        else {
            this.setState({ ucList: [], ucLoading: true })
        }
    }

    render() {
        return (
            <NoSsr>
                <div><br/></div>
                <Autocomplete
                    options={this.state.aiList}
                    getOptionLabel={(option) => option.description}
                    style={{ width: 600 }}
                    onChange={this.handleAIChange}
                    noOptionsText={this.state.aiLoading ? 'Loading AIs...' : 'No AI Data'}
                    renderInput={(params) => <TextField {...params} label="Lead AI" variant="outlined" />}
                />
                <div><br/></div>
                <Autocomplete
                    disabled={this.state.ucLoading}
                    options={this.state.ucList}
                    getOptionLabel={(option) => option.designCode + ' - ' + option.description}
                    style={{ width: 600 }}
                    noOptionsText={this.state.aiLoading ? 'Loading UCs...' : 'No UC Data'}
                    renderInput={(params) => <TextField {...params} label="Unpacked Chemical" variant="outlined" />}
                />
            </NoSsr>
        )
    }
}

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

如果你想控制自动完成的值，你不仅需要控制options，还需要控制那里的value。

请注意，因为您需要管理自动完成的值 - 您还需要在更改后保存和管理它（在内部 - 在该自动完成组件内）。

this.state = { 
        aiList: [], 
        ucList: [], 
        aiLoading: true, 
        ucLoading: true,
        uiValue: null
    };

<Autocomplete
    options={...}
    onChange={(ev, value) => {
      this.setState({uiValue: value});
    }}
    value={this.state.uiValue}
    ....
/>
<button
    onClick={e => {
        this.setState({uiValue: null});
    }}
  >
    Reset
</button>

在您的代码中 - 您还需要 handleAIChange 函数将第二个 Autocomplete 的值设置为 null 以重置它。

【讨论】：