我有一个组件,该组件包含Material UI中的多个自动完成组件。
当我更改其中一个自动完成功能的值时,我想对其他自动完成功能进行一些值更改,因此我使用了值属性。问题是,当我设置“自动完成”的值prop时,什么也没有发生。我做错什么了,我应该使用另一个道具吗?记录props.value时得到正确的值。
import React, { useState } from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
option: {
fontSize: 15,
"& > span": {
marginRight: 10,
fontSize: 18
}
}
});
export default function MySelect(props) {
const classes = useStyles();
return (
<>
{console.log(props.value)}
<Autocomplete
id="select"
style={{ width: 300, margin: 10 }}
options={props.data}
classes={{
option: classes.option
}}
/*defaultValue={props.data[0]}*/
value={props.value}
/*autoHighlight*/
getOptionLabel={option => option.text}
renderOption={option => (
<>
<React.Fragment>
<span>{option.code}</span>
{option.text}
</React.Fragment>
</>
)}
onChange={(event, newValue) => {
if (newValue) {
props.setValue(newValue.code);
}
}}
renderInput={params => (
<TextField
{...params}
label={props.ph}
variant="outlined"
fullWidth
inputProps={{
...params.inputProps,
autoComplete: "disabled" // disable autocomplete and autofill
}}
/>
)}
/>
</>
);
}