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获取我选择的值，但是我也想获取所选索引的selected innerText。有什么想法吗？

Answer 1

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

Answer 2

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

a =

   2     3     4
   3     4     5
   4     5     6

您可以在CodeSandbox

上查看工作示例。

Answer 3

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

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

event.target.innerText不适用于Material-ui <TextField>组件。但是，本机选择组件可能会起作用。

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

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

3 个答案: