如何从所有具有相同onchange函数的多个TextArea材质ui获取标签和值？

问题描述

data = {"ConnectionString/File Url":"Please enter the file URL of the data from the cloud ","Credentials/SASToken":"Please enter the SAS Token of the data from the cloud"}

我上面有以下数据，这些数据有助于使用循环但具有相同的onchange函数来创建Textarea。我想对所有文本区域使用相同的onchange，但是问题是我只能获取值，而不能将标签作为默认值

import React,{ Component } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Dialog from '@material-ui/core/Dialog';
import Button from '@material-ui/core/Button';
import Slide from '@material-ui/core/Slide';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';
import DialogActions from '@material-ui/core/DialogActions';

import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';

const Transition = React.forwardRef(function Transition(props,ref) {
    return <Slide direction="up" ref={ref} {...props} />;
});

const useStyles = makeStyles((theme) => ({
    modal: {
        display: 'flex',alignItems: 'center',justifyContent: 'center',},paper: {
        backgroundColor: theme.palette.background.paper,border: '1px solid #f7f7f7',margin: "2rem 0",boxShadow: theme.shadows[5],padding: theme.spacing(2,4,3),}));
export default function ConnectionParams(props) {
    const classes = useStyles();
    const handleClose = () => {
        props.closeModal();
    };

    const handleSubmit = () => {
        console.log("on submit");
        console.log("abcd",document.getElementsByName("items"));
    }

    const onChange = (event) => {
        console.log("target",event);
    }

    return (
        <Dialog
            open={props.display}
            TransitionComponent={Transition}
            keepMounted
            onClose={props.closeModal}
            aria-labelledby="alert-dialog-slide-title"
            aria-describedby="alert-dialog-slide-description"
            maxWidth = "md"
        >
            <DialogTitle id="alert-dialog-slide-title">Connection Parameters</DialogTitle>
            <DialogContent>
                <Grid container xs={12}>
                    <Grid item xs={12} style={{marginBottom:"1rem"}}>
                         {Object.keys(props.data).map((key,index) => ( 

                                  <TextField
                                    id="standard-full-width"
                                    name = "items"
                                    label={key}
                                    style={{ margin: 8 }}
                                    placeholder={props.data[key]}
                                    fullWidth
                                    margin="normal"
                                    onChange={(e) => onChange(e)}
                                    InputLabelProps={{
                                      shrink: true,}}
                                  />
                         ))}
                    </Grid>
                </Grid>
            </DialogContent>
            <DialogActions>
            <Button onClick={handleClose} color="primary">
                Cancel
            </Button>
            <Button onClick={handleSubmit} color="primary">
                Submit
            </Button>
            </DialogActions>
        </Dialog>
    )
}

解决方法

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

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

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