useState之后,上述组件的材料UI自动完成值未更改

时间:2019-11-28 16:18:02

标签: reactjs autocomplete material-ui react-hooks

我有一个组件,该组件包含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
            }}
          />
        )}
      />
    </>
  );
}

0 个答案:

没有答案