如何在反应中使用实质性UI将一个文本字段的值转移到另一个文本字段？

问题描述

我想将内容从一个文本字段（嵌入在对话框窗口中）转移到另一个文本字段（未嵌入）。

当前结果是“对象对象”（而不是文本字段值）。您知道为什么它不起作用吗？

我在功能组件中创建了两个不同的状态。函数“ setOriginalTextValue”应将一种状态的值传递给另一种状态：

export default function FormDialog() {
  const [value,setValue] = React.useState();
  const [dialogValue,setDialogValue] = React.useState();

  const [open,setOpen] = React.useState(false);

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

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

  const handleChange = (event) => {
    setValue({
      value: event.target.value,});
  };

  const handleDialogValueChange = (event) => {
    setDialogValue({
      dialogValue: event.target.value,});
  };

  const setOriginalTextValue = () => {
    setValue({
      value: dialogValue,});
  };

  return (
    <div>
      <Button variant="text" color="inherit">
        <TextField
          id="outlined-multiline-static"
          label="Frage"
          multiline
          onClick={handleClickOpen}
          rows={4}
          value={value}
          placeholder="hello"
          onChange={handleClickOpen}
          variant="outlined"
          style={{
            backgroundColor: "white",}}
        />
      </Button>
      <Dialog
        open={open}
        onClose={handleClose}
        onExit={setOriginalTextValue}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
        <DialogContent>
          <DialogContentText>Please type the text in here</DialogContentText>
          <TextField
            autoFocus
            margin="dense"
            id="name"
            label="ChatbotTexxt"
            multiline
            rows={4}
            onChange={handleDialogValueChange}
            fullWidth
            onExit={console.log("the dialog  value",dialogValue)}
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Cancel
          </Button>
          <Button onClick={handleClose} color="primary">
            Subscribe
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）