Autocomplete的getOptionLabel方法返回的对象([objectObject]),而不是字符串。
创始人
2024-09-22 19:31:20
0

Autocomplete 组件的 getOptionLabel 方法应该返回一个字符串,而不是一个对象。可以通过在 getOptionLabel 方法中访问对象中所需的属性并返回它们的字符串值来解决这个问题。

例如,如果你的对象具有 name 和 value 属性,你可以像这样重写 getOptionLabel 方法:

getOptionLabel={(option) => option.name + ' ' + option.value}

这将返回一个以对象的 name 属性和 value 属性组成的字符串为值的字符串。

如果你还想更改 Autocomplete 组件的属性,以便在没有选择任何选项的情况下也触发 onChange 事件并设置 inputValue 状态,则可以像这样更改 Autocomplete 的属性:

 {
    setInputValue(newValue ? newValue.name : '');
  }}
  inputValue={inputValue}
/>

这将确保当用户在输入框中输入时,即使他们没有从下拉列表中选择选项,也可以触发 onChange 事件,并且 inputValue 状态将被设置为输入的值。

完整代码示例:

import React, { useState } from 'react';
import Autocomplete from '@material-ui/lab/Autocomplete';
import TextField from '@material-ui/core/TextField';

const countries = [
  { name: 'United States', code: 'US' },
  { name: 'Canada', code: 'CA' },
  { name: 'Mexico', code: 'MX' },
];

export default function CountrySelect() {
  const [inputValue, setInputValue] = useState('');

  return (
     option.name + ' ' + option.code}
      onChange={(event, newValue) => {
        setInputValue(newValue ? newValue.name : '');
      }}
      inputValue={inputValue}
      renderInput={(params) => (
        
      )}
    />
  );
}

相关内容

热门资讯

据悉!三哥玩摆头注可以控制,越... 据悉!三哥玩摆头注可以控制,越乡游义乌辅助器微信免费,大纲教程(原来确实是有挂)-哔哩哔哩1、不需要...
为切实保障!闲玩暗宝辅助软件下... 为切实保障!闲玩暗宝辅助软件下载,火神大厅辅助器,窍要教程(原来是真的有挂的)-哔哩哔哩1、打开软件...
经核实!四川途游破解安装包,八... 经核实!四川途游破解安装包,八闽掌上十八卦脚本,诀窍教程(一贯确实有挂的)-哔哩哔哩1)八闽掌上十八...
据玩家消息!胡乐辅助脚本可卡片... 据玩家消息!胡乐辅助脚本可卡片吗,小闲辅助神器,攻略教程(一直是有挂)-哔哩哔哩运胡乐辅助脚本可卡片...
无独有偶!阿拉斗牌辅助视频,情... 无独有偶!阿拉斗牌辅助视频,情怀游戏字牌辅助,指引教程(一贯是有挂)-哔哩哔哩1、这是跨平台的情怀游...
经调查!水鱼辅助软件下载,丰城... 经调查!水鱼辅助软件下载,丰城呱呱辅助器,法门教程(一贯确实有挂)-哔哩哔哩1、水鱼辅助软件下载透视...
更值得关注的是!来几局免费辅助... 更值得关注的是!来几局免费辅助器,胡乐辅助脚本,步骤教程(一贯确实有挂)-哔哩哔哩1、来几局免费辅助...
更值得关注的是!欢乐达人正版脚... 更值得关注的是!欢乐达人正版脚本,新玄龙辅助,大纲教程(其实真的有挂)-哔哩哔哩进入游戏-大厅左侧-...
随着!广西微乐小程序辅助器,奇... 随着!广西微乐小程序辅助器,奇迹陕西辅助,学习教程(一贯确实有挂的)-哔哩哔哩1、下载好广西微乐小程...
日前!闲来辅助工具,新海贝辅助... 日前!闲来辅助工具,新海贝辅助器,方式教程(其实是有挂的)-哔哩哔哩1、新海贝辅助器透视辅助简单,新...