如何从TextField中获取innerText（选定文本而不是值）作为选择

Question

我正在为我的项目使用material-ui，我需要获取选定的文本（而不是值）并进行一些解析。 我似乎找不到解决方法。

这是我的组件的外观：

                    <TextField
                        select
                        margin="dense"
                        label="Name"
                        variant="outlined"
                        className={classes.textField}
                        value={values.nameId}
                        onChange={handleChange('nameId')}
                    >
                        {names.map(row => (
                            <MenuItem key={row.Id} value={row.Id}>{row.Name}</MenuItem>
                        ))}
                    </TextField>

处理程序如下所示：

const handleChange = name => event => {

    setValues({ ...values, [name]: event.target.value });
};

显然event.target.value获取我的选定值，但我也想获取选定索引的选定innerText。 有任何想法吗？

Answer 1

您是否尝试过使用event.target.innerText ？ 事件的target属性应包含您可以在变更处理程序中访问的整个元素的数据。

Answer 2

在handleChange中，使用Array.find（）搜索所需的元素，然后提取其名称：

 const handleChange = name => event => {
    const innerText = names
    .find(name => name.Id === event.target.value)
    .Name;

    console.log('inner text: ', innerText);

    setValues({ ...values, [name]: event.target.value });
  };

您可以在CodeSandbox上查看工作示例

Answer 3

我做了更多的探索，并且能够使用以下属性访问内部文本：

event._targetInst.child.alternate.memoizedProps[0]

event.target.innerText对材料用户界面<TextField>组件不起作用。 但是，本机选择组件可能会工作。

我不确定这是否是最好的方法，但目前看来仍然有效。