Реакция первого элемента в TextField Select не выделяется

Question

У меня есть json полезная нагрузка, которая передается как пара ключ-значение. Мне нужно заполнить данные в текстовом поле выбора, который действует как выпадающий список. Я могу выбрать первый или второй варианты в раскрывающемся списке, если в раскрывающемся списке есть два или более элементов. Однако, когда в раскрывающемся списке есть один элемент, он не выделяется, даже когда я щелкаю по нему.

Ниже приведен мой код, в котором я устанавливаю свое состояние при использовании функционального компонента:

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

Ниже приведен код, который проверяет, щелкнул ли элемент в TextField:

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

Также ниже приведен мой код, в котором я установил TextField с данными, полученными из API:

           <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;

Обновление: Добавить элемент в список

const departments = [{id: -1, department: 'Please Select...'}, ...response.data];
setDepartments(departments);