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函数将第二个自动完成功能的值也设置为null才能重置它。

使用第一个自动完成功能清除第二个自动完成功能的值

1 个答案: