如何解决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
}}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。