Material UI 选项，取回选项的值

Question

愚蠢的问题，当我 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" />
    )}
/>

Answer 1

您可能想使用 onInputChange 而不是 onChange

它可能看起来像这样

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

和定义

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

Answer 2

onChange 属性为您提供 selected 选项作为回调中的第二个参数。

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

Material UI 选项，取回选项的值

Material UI options, getting back the value of the option

javascript

reactjs

material-ui

console.log