javascript - React 中使用功能组件的动态输入字段

Question

我正在尝试通过单击按钮在我的 React 应用程序(使用 Material UI)中创建动态输入字段。每当单击添加按钮时，它都会在对话框中创建一个新的输入字段，但我似乎无法在文本字段中输入任何值。以下是我的 app.js 文件 -

import React from "react";
import "./styles.css";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";
import { Box, Grid } from "@material-ui/core";

export default function App() {
  const [open, setOpen] = React.useState(false);
  const [values, setValues] = React.useState([]);
  const [text, setText] = React.useState("");

  const handleClickOpen = () => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
    setValues([]);
  };
  const handleChangeText = (e) => {
    setText(e.target.value);
  };
  const addValue = () => {
    setValues([...values, ""]);
  };
  const handleValueChange = (index, e) => {
    values[index] = e.target.value;
    console.log(values);
    setValues(values);
  };
  const deleteValue = (jump) => {
    setValues(values.filter((j) => j !== jump));
  };

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Create
      </Button>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title">New Dialog</DialogTitle>
        <DialogContent>
          <DialogContentText>Sample Text.</DialogContentText>
          <TextField
            autoFocus
            margin="dense"
            value={text}
            onChange={handleChangeText}
            label="Text"
            fullWidth
          />
          {values.map((jump, index) => (
            <Box key={"jump" + index}>
              <Grid container spacing={1} alignItems="flex-end">
                <Grid item xs={10}>
                  <TextField
                    autoFocus
                    margin="dense"
                    label="Value"
                    value={jump || ""}
                    onChange={(e) => handleValueChange(index, e)}
                    fullWidth
                  />
                </Grid>
                <Grid item xs={2}>
                  <div
                    className="font-icon-wrapper"
                    onClick={() => deleteValue(jump)}
                  >
                    <IconButton aria-label="delete">
                      <DeleteIcon />
                    </IconButton>
                  </div>
                </Grid>
              </Grid>
            </Box>
          ))}
        </DialogContent>
        <Button onClick={addValue} color="primary">
          Add
        </Button>
        <DialogActions>
          <Button onClick={handleClose} variant="contained" color="secondary">
            Cancel
          </Button>
          <Button onClick={handleClose} variant="contained" color="primary">
            Create
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

Here is the code sandbox link .
我在对话框中有一个简单的文本字段，它也可以完美运行。问题在于动态字段。我不知道我在这段代码中犯了什么错误。有人请帮帮我。提前致谢

Answer 1

您在函数handleValueChanges 中有问题，不要使用mutation 使用不可变数据。
正确的代码:

  const handleValueChange = (index, e) => {
    const updatedValues = values.map((value, i) => {
      if(i === index) {
        return   e.target.value
      }else {
        return value
      }
    })
    setValues(updatedValues);
  };

您可以从这里测试: https://codesandbox.io/s/dynamic-textfield-forked-gck25?file=/src/App.js