如何将 onchange 与自动完成材料 UI 一起使用?

Question

使用方法句柄处理 使用钩子样式的表单输入的 OnChange 事件处理，该样式设置了对象的状态。

handleChange 函数反过来调用 setLocation，该位置使用新值更新位置状态。

为了使用户数据输入更容易，我决定将 city 字段更改为自动完成，但我未能捕获自动完成的值。 在文档中，他告诉我我需要传递两个参数，但我不能很好地理解

function(event: object, value: any) => void
event: The event source of the callback
value: null

如何访问字段的值并将其放入我的函数中以插入数据？

<Autocomplete
style={{ width: 300 }}
value={location.City}
onChange={handleChange}
options={list.City}
classes={{
option: classes.option,
}}
autoHighlight
getOptionLabel={option => typeof option === 'string' ? option : option.City}
renderOption={option => (
<React.Fragment>
{option.City} -{option.State}
</React.Fragment>
)}
renderInput={params => (
<TextField {...params} label="City"  value={location.City}  margin="normal" variant="outlined" style={{ width: 220 }} inputProps={{
...params.inputProps,
autoComplete: 'disabled', // disable autocomplete and autofill
}}/>
)}
/>

Answer 1

如果您只是尝试在用户键入时获取输入的值，则需要使用onInputChange.当用户从下拉列表中选择一个选项时，onChange处理程序将运行。

export default function ComboBox() {
function handleInputChange(event, value) {
console.log(value);
}
return (
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={(option: FilmOptionType) => option.title}
style={{ width: 300 }}
onInputChange={handleInputChange}
renderInput={params => (
<TextField {...params} label="Combo box" variant="outlined" fullWidth />
)}
/>
);
}

代码沙盒

Answer 2

反应 SyntheticEvent 在异步请求中设置空目标，尝试使用

event.persist((

在事件上

https://reactjs.org/docs/events.html#event-pooling

const handleOnChangeText=(event)=> {     
event.persist();
console.log(event)    
let active = true;
setOpen(true);
if (!loading) {
return undefined;
}
(async () => {
const response = await fetch('https://country.register.gov.uk/records.json?page-size=5000');
await sleep(1e3); // For demo purposes.
const countries = await response.json();
if (active) {
setOptions(Object.keys(countries).map(key => countries[key].item[0]) as CountryType[]);
}
active = false;
})();   
}

<Autocomplete
id="comboboxAsync"
disableOpenOnFocus
style={{ width: 300 }}
open={open}
onInputChange={handleOnChangeText}
...

Answer 3

Id 正在以下模式下检索：id-option-numberOfOption，这就是为什么我必须拆分检索到的值以更新状态

const handleAutoCompleteChange = (event, value) => {
this.setState({ ...this.state, [event.target.id.split("-")[0]]: value });
console.log([event.target.id.split("-")[0]],value);
}

Answer 4

您可以使用mui自动完成npm，它的编码简单且更少，选项更多(如头像视图异步调用(。你应该尝试一下。这是更多信息的示例，请访问此处。 [http://mui-autocomplete.com/home]

`import React from 'react';
import MuiAutocomplete from 'mui-autocomplete';
const cities = [
{
id: 1,
name: "Alabama",
code: "AL"
},
{
id: 2,
name: "Alaska",
code: "AK"
},
{
id: 3,
name: "American Samoa",
code: "AS"
}];
function Home () {
return (
<div>
<MuiAutocomplete
placeholder="Countries"
name="countries"
setvalue={1}
setdata={cities}
variant="outlined"
template={{
title: 'name'
}}
/>
</div>
);
}`