问题描述
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])