如何使用带有动态问题数量的 React 状态存储用户输入

Question

我正在尝试创建一个表单并将每个文本字段的用户输入存储到状态中。将从外部源检索问题，因此我将所有问题存储到一个对象中，其中问题和答案表示为键值对。此实现的问题是我无法在文本字段中输入任何内容。无论我输入什么，它们都保持为空。

import Box from "@mui/system/Box";
import Stack from "@mui/system/Stack";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import TextField from "@mui/material/TextField";
import { useState } from "react";
import HRMButton from "../Button/HRMButton";
import { fonts } from "../../Styles";


export default function OnboardingSurvey({prev, next, style}) {
    //The form could contain any number of questions not just the four used in this example
    const [form, setForm] = useState({
        "What suggestions do you have for improving the company culture or work environment?": "",
        "Do you have any feedback on your manager or team that you\'d like to share?": "",
        "How was your experience working here?": "",
        "Is there anything else you would like to share that we haven\'t discussed?": "" 
    });

    return (
        <Box sx={{...{
            border: "1px solid #EBEBEB",
            borderRadius: "10px",
            minWidth: "1003px",
            paddingX: "113px",
            paddingY: "63px",
            fontFamily: fonts.fontFamily
        }, ...style}}>
            <h4 style={{textAlign: "center", marginTop: 0}}>Please answer the questions below as detailed as possible</h4>
            <p style={{textAlign: "center", marginBottom: "50px"}}>
                Your answers are going to be used to further improve our process.
            </p>
            {Object.keys(form).map((question) => (
                <>
                    <p style={{textAlign: "left"}}>{question}</p>
                    <TextField 
                        id={`${question}-textfield`}
                        value={form[question]}
                        placeholder={"Your answer here"}
                        onChange={(e) => {
                            setForm({
                                ...form,
                                question: e.target.value
                            });
                        }}
                        rows={4}
                        multiline
                        sx={{
                            marginBottom: "50px",
                            width: "100%"
                        }}
                    />
                </>
            ))}
            <Stack direction="row" alignContent="center" justifyContent="space-between">
                <HRMButton mode="secondaryB" startIcon={<ArrowBackIcon />} onClick={prev}>Previous</HRMButton>
                <HRMButton mode="primary" onClick={next}>Save and next</HRMButton>
            </Stack>
        </Box>
    );
};

Answer 1

你可以试试这个

{Object.keys(form).map((question) => (
  <>
      <p style={{textAlign: "left"}}>{question}</p>
      <TextField 
          id={`${question}-textfield`}
          value={form[question]}
          placeholder={"Your answer here"}
          name={question}
          onChange={(e) => {
              setForm(formState => ({
                ...formState,
                [e.target.name]: e.target.value
            }));
          }}
          rows={4}
          multiline
          sx={{
              marginBottom: "50px",
              width: "100%"
          }}
      />
  </>
))}