Material UI 选项，取回选项的值

问题描述

愚蠢的问题，当我以 console.log 为目标时，我得到以下内容

<li tabindex="-1" role="option" id="mui-21183-option-0" data-option-index="0" aria-disabled="false" aria-selected="false" class="MuiAutocomplete-option" data-focus="true">Latvia</li>

我如何控制台日志 Latvia 而不是查找名称本身。

这是我的自动完成选项代码

<Autocomplete
    options={countries}
    getoptionLabel={(option) => option.name}
    onChange={(e) => {
        console.log(e.target)
    }}
    renderInput={(params) => (
        <TextField
            {...params}
            variant="outlined"
            defaultValue={props.filledData.officeCountry}
            value={officeCountry || ""}
            label="REGISTERED OFFICE COUNTRY" />
    )}
/>

解决方法

您可能想使用 onInputChange 而不是 onChange

看起来像这样

 onInputChange={(e,value) => console.log(value)}

和定义

onInputChange: (event: React.ChangeEvent<{}>,value: string,reason: AutocompleteInputChangeReason)

,

onChange 道具为您提供所选选项作为回调中的第二个参数。

material-ui 文档说：

onChange: Callback fired when the value changes.

签名：

function(event: object,value: T | T[],reason: string) => void

event：回调的事件源。

value：组件的新值。

reason：“create-option”、“select-option”、“remove-option”、“blur”或“clear”之一。

所以解决方案是：

 onChange={(e,selectedOption) => {
      console.log("OPTION -->",selectedOption); // {label: 'LTV',value: 'Latvia'}
      console.log("VALUE -->",selectedOption.value); // Latvia
 }}

I'll live you a CodeSandbox example