React First Item in TextField Select 没有得到 Selected

Question

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

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

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

下面是检查文本字段中的项目是否被单击的代码：

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 事件。相反，您可以添加另一个项目，例如 "Please select" 然后您可以 select 您的单个项目。请检查此示例：

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

React First Item in TextField Select 没有得到 Selected

React First Item in a TextField Select does not get Selected

javascript

functional-programming

reactjs

dropdown