如何從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 function：

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 function 我如何獲得下拉項目的索引？

Answer 1

我認為您可以嘗試向菜單項添加數據屬性，例如：

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

然后從e.currentTarget.dataset.index或通過獲取發送到事件處理程序的第二個參數（子）獲取該索引，如本頁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']);
};

Answer 2

您正在映射元素， map 方法為您提供元素的索引，您可以使用 onClick prop 通過處理程序冒泡給定所選元素的索引

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

handleItemClick代碼將如下所示

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