Использование первого автозаполнения для очистки значения второго автозаполнения

Question

У меня есть следующий код. Он отображает два элемента управления автозаполнения. Значение, выбранное в первом элементе управления, определяет возможные значения второго элемента управления. Моя проблема заключается в том, что когда кнопка «очистить» нажата на первом элементе управления, он также должен очистить второй элемент управления, поскольку он больше не действителен. Событие 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>
        )
    }
}

Answer 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, чтобы также установить значение второго автозаполнения до нуля, чтобы сбросить его.