如何解决如何在反应中使用实质性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>
);
}
解决方法
看起来像您在设置对象,但是需要字符串。尝试此更改:
const handleChange = (event) => {
setValue(event.target.value);
};
const handleDialogValueChange = (event) => {
setDialogValue(event.target.value);
};
const setOriginalTextValue = () => {
setValue(dialogValue);
};
useState
这样的设置器期望直接值,因为它们已经“知道”变量名,因为这是他们的唯一责任。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。