如何从具有相同 onchange 功能的多个 TextArea 材质 ui 中获取标签和值？答案

【问题标题】：How to get the label and values from multiple TextArea material ui with same onchange function for all?如何从具有相同 onchange 功能的多个 TextArea 材质 ui 中获取标签和值？
【发布时间】：2020-09-09 05:40:17
【问题描述】：

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"}

我上面有以下数据，这些数据有助于使用循环创建 Textarea，但使用相同的 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>
    )
}

【问题讨论】：

标签： javascript reactjs material-ui textarea

【解决方案1】：

我假设您正在谈论的标签是您的key 映射循环中的Object.keys。将你的 onChange 方法更改为：

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

还有你的onChange 输入道具：

<TextField
    ...otherProps
    onChange={(e) => onChange(e, key)}
 />

key 是标签，您将拥有它的价值。您可以查看此沙盒以了解实际使用情况：Sandbox

【讨论】：

【解决方案2】：

在onChange方法（标签，值）和materialui pass prop的onChange中获取值：

 {value=>onChangeHandle("<label Text>", value)}

【讨论】：