如何存储自动完成选择的选项材料-ui

Question

我正在尝试创建一个表单，其中用户可以在下拉菜单中选择多个成员。由于我使用的是material-ui，所以我使用了Autocomplete。

这是我的代码：

import React, {useState} from 'react';
import {useDispatch} from 'react-redux';
import {TextField , Button, Typography, Paper } from '@material-ui/core';
import Autocomplete from '@material-ui/lab/Autocomplete';

import useStyles from './styles';

import {createBug} from '../../actions/bugs';

const Form = () => {
    const classes = useStyles();
    const [bugData, setBugData] = useState({
        creator: "",
        title: "",
        description: "",
        project: "",
        members: [],
        severity: "",
        status: ""
    });
    const dispatch = useDispatch();

    const sampleUsers = [
        {name: "Mickey Mouse"},
        {name: "John Wick"},
        {name: "Tom Kirkman"},
        {name: "Juan Dela Cruz"},
        
    ];

    const handleSubmit = (event) => {
        event.preventDefault();

        dispatch(createBug(bugData));
    };

    const clear = () => {};

    return (
        <Paper className={classes.paper}>
            <form autoComplete="off" className={`${classes.root} ${classes.form}`} noValidate onSubmit={handleSubmit}>
                <Typography variant="h6"> Creating a Bug </Typography>
                <TextField name="creator" variant="outlined" label="Creator" fullWidth value={bugData.creator} onChange={(e) => setBugData({ ...bugData, creator: e.target.value})} />
                <TextField name="title" variant="outlined" label="Title" fullWidth value={bugData.title} onChange={(e) => setBugData({ ...bugData, title: e.target.value})} />
                <TextField name="description" multiline rows={4} variant="outlined" label="Description" fullWidth value={bugData.description} onChange={(e) => setBugData({ ...bugData, description: e.target.value})} />
                <TextField name="project" variant="outlined" label="Project" fullWidth value={bugData.project} onChange={(e) => setBugData({ ...bugData, project: e.target.value})} />
                <Autocomplete
                    multiple
                    limitTags={1}
                    options={sampleUsers}
                    getOptionLabel={(option) => option.name}
                    fullWidth
                    
                    
                    renderInput={(params) => (
                    <TextField
                        {...params}
                        name="members"
                        variant="outlined"
                        label="Members"
                        placeholder="Add a member"
                        value={bugData.members}
                        onChange={(e) => setBugData({ ...bugData, members: e.target.value})}
                    />
                    )}
                />
                {/* <TextField name="members" variant="outlined" label="Members" fullWidth value={bugData.members} onChange={(e) => setBugData({ ...bugData, members: e.target.value})} /> */}
                <TextField name="severity" variant="outlined" label="Severity" fullWidth value={bugData.severity} onChange={(e) => setBugData({ ...bugData, severity: e.target.value})} />
                <TextField name="status" variant="outlined" label="Status" fullWidth value={bugData.status} onChange={(e) => setBugData({ ...bugData, status: e.target.value})} />

                <Button className={classes.buttonSubmit} variant="contained" color="primary" size="large" type="submit" fullWidth>Add Bug</Button>
                <Button variant="contained" color="secondary" size="small" onClick={clear} fullWidth>Clear</Button>
                
                
            </form>
        </Paper>
    )
}

export default Form;

这是我的代码的输出：

creator: "Dave Awesome"
description: "A but in the bug tracker app"
members: Array(1)
0: "Tom"
length: 1
__proto__: Array(0)
project: "Bug Tracker"
severity: "low"
status: "Pending"
title: "React Bug"creator: "Dave Banguilan"
description: "A but in the bug tracker app"
members: Array(1)
0: "Tom"
length: 1
__proto__: Array(0)
project: "Bug Tracker"
severity: "low"
status: "Pending"
title: "React Bug"

这是我的问题： 如何将我选择的选项添加到我的成员数组？

如果您查看成员数组，只有一个值是“Tom”，但是当我测试它时，我选择了 3 个名称。它不会将选定的名称存储到成员数组中。

Answer 1

你做错了几件事。首先，您需要将onChange 事件作为Autocomplete/> 的道具。 然后，您需要在 onChange 函数中传递第二个参数：

(e, newValues) => setBugData({ ...bugData, members: newValues})}