如何将一个文本字段的值转移到另一个具有react材质UI的文本字段

Question

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

当前的结果是"；对象对象"；(而不是文本字段值(。你知道为什么它不起作用吗？

我在一个功能组件中创建了两种不同的状态。函数"；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>
);
}

Answer 1

看起来您正在设置对象，但需要字符串。尝试此更改：

const handleChange = (event) => {
setValue(event.target.value);
};
const handleDialogValueChange = (event) => {
setDialogValue(event.target.value);
};
const setOriginalTextValue = () => {
setValue(dialogValue);
};

像这样的useStatesetter期望直接值，因为他们已经"知道"变量名，因为这是他们唯一的责任。