如何从 ReactJs 和 material UI 中的下拉列表中获取所选项目的索引？

Question

这是下拉组件：

<DropDownField
  name={formElement.name}
  label={formElement.name}
  value={formik.values[formElement.name] || ''}                     
  dropDownItems={formElement.name === 'Loan Details' ? loanEnum : formElement.enum}
  className={classes.flexGrow}
  onChange={dropDownChangeHandler}
  error={formik.touched[formElement.name] && Boolean(formik.errors[formElement.name])}
  helperText={formik.touched[formElement.name] && formik.errors[formElement.name]}
 />

和 DropDownField 组件：

<FormControl fullWidth>
        {/* eslint-disable-next-line */}
        <InputLabel id="simple-select-label">{props.label}</InputLabel>
        <Select labelId="simple-select-label" id="simple-select" {...props}>
            {/* eslint-disable-next-line */}
            {props.dropDownItems.map((element, index) => (
                <MenuItem key={element + index} value={element}>
                    {element}
                </MenuItem>
            ))}
        </Select>
</FormControl>

onChange 函数:

const dropDownChangeHandler = async (e) => {
        const loanDetails = await LoanDetailsService.search(formik.values['Employee Number']);
        formik.handleChange(e);
        console.log(loanDetails);
        formik.setFieldValue('Loan Type', loanDetails[index]['Loan Type']);
    };

现在在 onChange 函数中，我如何获取下拉项的索引？

Answer 1

您正在对元素进行映射，map 方法为您提供了元素的索引，您可以使用 onClick 属性通过处理程序冒泡给定所选元素的索引

{props.dropDownItems.map((element, index) => (
<MenuItem key={element + index} value={element} onClick={()=> handleItemClick(index)} > 
{element}
</MenuItem> 
))}

handleItemClick代码如下

const handleItemClick = (idx) => {
console.log(idx); 
}

Answer 2

我认为您可以尝试向菜单项添加数据属性，例如：

{props.dropDownItems.map((element, index) => (
    <MenuItem key={element + index} value={element} data-index={index}>
        {element}
    </MenuItem>
))}

然后从 e.currentTarget.dataset.index 或通过获取发送到事件处理程序的第二个参数（子）获取该索引，如 this page 上的 onChange 部分所述。

例如类似于：

const dropDownChangeHandler = async (e) => {
    const index = +e.currentTarget.dataset.index;
    const loanDetails = await LoanDetailsService.search(formik.values['Employee Number']);
    formik.handleChange(e);
    console.log(loanDetails);
    formik.setFieldValue('Loan Type', loanDetails[index]['Loan Type']);
};

或

const dropDownChangeHandler = async (e, child) => {
    const index = child.props['data-index'];
    const loanDetails = await LoanDetailsService.search(formik.values['Employee Number']);
    formik.handleChange(e);
    console.log(loanDetails);
    formik.setFieldValue('Loan Type', loanDetails[index]['Loan Type']);
};

如何从 ReactJs 和 material UI 中的下拉列表中获取所选项目的索引？

How to get the index of the selected item from a dropdown in ReactJs and material UI?

javascript

reactjs

material-ui

frontend