前端项目实战肆佰壹拾壹react-admin和material ui-material ui Autocomplete之状态改变

最新推荐文章于 2024-09-30 15:42:36 发布

前端歌谣

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量48

点赞数

文章标签：前端 react.js ui

本文链接：https://blog.csdn.net/qq_41632427/article/details/132539447

版权

前端项目实战案例专栏收录该内容

500 篇文章 1 订阅

订阅专栏

本文介绍了如何在React中使用`useState`和`Autocomplete`组件实现控件的可控状态，展示了value和inputValue的管理和更新过程。

摘要由CSDN通过智能技术生成

import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';

const options = ['Option 1', 'Option 2'];

export default function ControllableStates() {
  const [value, setValue] = React.useState<string | null>(options[0]);
  const [inputValue, setInputValue] = React.useState('');

  return (
    <div>
      <div>{`value: ${value !== null ? `'${value}'` : 'null'}`}</div>
      <div>{`inputValue: '${inputValue}'`}</div>
      <br />
      <Autocomplete
        value={value}
        onChange={(event: any, newValue: string | null) => {
          setValue(newValue);
        }}
        inputValue={inputValue}
        onInputChange={(event, newInputValue) => {
          setInputValue(newInputValue);
        }}
        id="controllable-states-demo"
        options={options}
        sx={{ width: 300 }}
        renderInput={(params) => <TextField {...params} label="Controllable" />}
      />
    </div>
  );
}