如果在 React js 的自动完成组合框中未选择任何值，如何发出警报？

如何解决如果在 React js 的自动完成组合框中未选择任何值，如何发出警报？

function comboBox(props) {
        const options = ['z','y','x']
        var va;
        
        return (
            <div style={{height:'100vh',backgroundImage: `url(${back})`,backgroundSize: 'cover',marginTop: '-8vh'}}>
            <div style={{height:'100vh',textAlign: 'center',alignItems: 'center',direction: 'rtl'}}>
            <h1 style={{marginTop: '8vh',marginLeft: '-10vh',paddingTop: '10vh'}}>hoose</h1>
            <Autocomplete style={{borderStyle: 'groove',borderWidth: 'Thick'}}
                options={options}
                style={{ width: 300 }}
                defaultValue={options[0]}
                getoptionLabel={(option) => options[0]}
                onChange={(event,value) =>va=value}
                renderInput={(params) =>
                <TextField {...params} variant="outlined"  style={{paddingRight: '90vh'}}/>}
            />
            <button style={{backgroundColor:'#f4eae0',height: '10vh',width:'52vh',marginTop: '28vh',marginRight: '10vh'}} onClick={() => getApi(va)}>go if a value selected)</button>
            </div>
          </div>
        );
      }

它给了我一个包含 3 个选项的组合框和一个默认值 - 第一个选项。

但是如果我不选择任何值就继续，根据我的默认设置 - 我会得到 undefined 作为选定值 allthought 我看到组合框中的第一个选项。为什么？

解决方法

问题在于您保存 val 的方式。因为您使用的是 React，所以您应该将它保存在一个状态中，并且值应该来自那里。如果要检查是否没有值，只需在 onChange 事件中添加检查即可。

import { useState } from 'react'

const options = ['z','y','x']

function comboBox(props) {
    const [val,setVal] = useState(options[0])

    return (
        <div
            style={{
                height: '100vh',backgroundImage: `url(${back})`,backgroundSize: 'cover',marginTop: '-8vh',}}>
            <div
                style={{
                    height: '100vh',textAlign: 'center',alignItems: 'center',direction: 'rtl',}}>
                <h1
                    style={{ marginTop: '8vh',marginLeft: '-10vh',paddingTop: '10vh' }}>
                    choose
                </h1>
                <Autocomplete
                    style={{ borderStyle: 'groove',borderWidth: 'Thick' }}
                    options={options}
                    style={{ width: 300 }}
                    value={val}
                    onChange={(event,value) => {
                        if (value === null) {
                            alert('no value')
                        }
                        setVal(value)
                    }}
                    renderInput={(params) => (
                        <TextField
                            {...params}
                            variant="outlined"
                            style={{ paddingRight: '90vh' }}
                        />
                    )}
                />
                <button
                    style={{
                        backgroundColor: '#f4eae0',height: '10vh',width: '52vh',marginTop: '28vh',marginRight: '10vh',}}
                    onClick={() => {
                        if(val === null){
                            alert('no value provided')
                        } else {
                            getApi(val)
                        }    
                    }}
                >
                    go if a value selected)
                </button>
            </div>
        </div>
    )
}

或者，您可以添加一个依赖于 val 的 useEffect，它会在您更改自动完成并执行我在 onChange 中所做的相同检查时触发

  useEffect(() => {
    if(val === null){
      alert('no value')
    }
  },[val])