未选择TextField Select中的第一项反应

Question

我有作为键值对传递的json有效负载。我需要在TextField选择中填充数据，该选择充当下拉菜单。如果下拉菜单中有两个或多个项目，则可以在下拉菜单中选择第一个或第二个选项。但是，当下拉菜单中只有一个项目时，即使单击它也不会被选中。

这是下面的代码，在我使用功能组件时设置状态：

const [departments, setDepartments] = useState([]);
const [selected, setSelected] = useState();

这是下面的代码，用于检查是否单击了TextField中的项目：

const handleChange = event => {
   setSelected(event.currentTarget.id);
};

也是这是我下面的代码，我使用从API接收的数据来设置TextField：

           <TextField
              fullWidth
              label="Select Department"
              margin="dense"
              name="departments"
              onChange={handleChange}
              required
              select
              // eslint-disable-next-line react/jsx-sort-props
              SelectProps={{ native: true }}
              value={selected}
              variant="outlined"
            >
              {departments.map(option => (
                <option
                  key={option.id}
                  value={option.id}
                >
                  {option.department}
                </option>
              ))}
            </TextField>

请帮助我解决此问题。因此，即使它是下拉列表中的唯一项目，我也可以设置下拉列表中的第一项。

Answer 1

您在代码上有一些错误，就像您使用event.currentTarget.id一样，但是您应该使用event.target.value。

但是，当下拉菜单中只有一个项目时，单击它时，它不称为handleChange，因为handleChange是onChange事件。如果只有一项，则无法更改项目，因为只有一项，因此不会触发onChange事件。相反，您可以添加另一个项目，例如“请选择”，然后可以选择单个项目。请检查以下示例：

import React, {useEffect, useState} from "react";
import TextField from "@material-ui/core/TextField";

function TextFieldDDL() {
    const [selected, setSelected] = useState();
    const departments=[
        {id: -1, department: 'Please Select...'},
        {id: 1, department: 'CSE'},
        // {id: 2, department: 'BBA'},
        // {id: 3, department: 'EEE'}
    ];

    function handleChange(e){
        console.log(e.target.value, 'e');
        setSelected(e.target.value);
    }

    return (
        <React.Fragment>
            <TextField
                fullWidth
                label="Select Department"
                margin="dense"
                name="departments"
                onChange={handleChange}
                required
                select
                // eslint-disable-next-line react/jsx-sort-props
                SelectProps={{native: true}}
                value={selected}
                variant="outlined"
            >
                {departments.map(option => (
                    <option
                        key={option.id}
                        value={option.id}
                    >
                        {option.department}
                    </option>
                ))}
            </TextField>
        </React.Fragment>
    );
}
export default TextFieldDDL;