javascript 如何在加载值时编辑表单?

gab6jxml  于 2023-06-04  发布在  Java
关注(0)|答案(1)|浏览(167)

我有一个窗体,当它由组件中的onClick呈现时,它加载了值。我需要编辑当前值并执行更新操作。
以下是沙盒链接https://codesandbox.io/s/material-demo-forked-e9fju?file=/demo.js
我应该设置状态来实现这个吗?

1mrurvl1

1mrurvl11#

是的,您需要在状态中保存值。当用户单击subscribe时,从state获取该值。下面是更新的代码:

import React from "react";
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 Form from "semantic-ui-react";

export default function FormDialog() {
  const [open, setOpen] = React.useState(false);
  const [value, setValue] = React.useState("Hello");

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Open form dialog
      </Button>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
        <DialogContent>
          <DialogContentText>
            To subscribe to this website, please enter your email address here.
            We will send updates occasionally.
          </DialogContentText>
          <TextField
            autoFocus
            margin="dense"
            id="name"
            label="Application Name"
            type="text"
            value={value}
            onChange={(e) => setValue(e.target.value)}
            fullWidth
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Cancel
          </Button>
          <Button onClick={handleClose} color="primary">
            Subscribe
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

下面是演示:https://codesandbox.io/s/material-demo-forked-ln0xe?file=/demo.js:0-1824

相关问题