javascript - 如何在 React 中从同一个子组件表单创建对象数组

Question

我正在尝试从具有相同字段的子组件表单创建对象数组。

我正在使用反应钩子来存储状态并在 JSX 中使用 for 循环重复子组件。

App 流程 => Parent --> 2 个相同的 Child 但不同的输入 --> 创建对象数组 --> 返回对象的父数组

用户界面

交付联系人是相同子组件的表单 UI 的图像

父代码

      {[...Array(2)].map((e, i) => {

        const deliveryContactDetails = deliveryContact => {
          // deliveryRef[i].current.sendData()
          console.log(deliveryContact);
        }

        return (
          <React.Fragment>
          <Grid item xs={12}>
          <FormLabel component="legend">
            Delivery Contact Person : ({i+1})
          </FormLabel>
          </Grid>

          <DeliveryContact formNo={i+1} ref={deliveryRef[i] = useRef()} saveDelivery={deliveryContactDetails} ></DeliveryContact>

          </React.Fragment>
        )

      })}

    </React.Fragment>

子代码

    const formNo = props.formNo;

    const [values, setValues] = useState({...contactObj})

    const handleInputChange = ({ target }) => {
        const { name, value } = target;
        setValues({...values, [name]: value})
    };

    useImperativeHandle(ref,() => ({
        sendData() {
          props.saveDelivery(values);
        }
    }));

    return(
        <React.Fragment>

            <Grid item xs={12} sm={6}>
                <TextField
                select
                fullWidth
                margin="dense"
                id="salutation"
                name={"salutation" + formNo}
                fullWidth
                onChange={handleInputChange}
                value={values.salutation}
                variant="outlined"
                label="Salutation"
                >
                <MenuItem value={`Mr.`}>Mr.</MenuItem>
                <MenuItem value={`Ms.`}>Ms.</MenuItem>
                </TextField>
            </Grid>

            <Grid item xs={12} sm={6}>
                <TextField
                id="deliveryContactName"
                name={"name" + formNo}
                label="Delivery Contact Name"
                fullWidth
                variant="outlined"
                margin="dense"
                onChange={handleInputChange}
                value={values.deliveryContactName}
                inputProps={{
                    maxLength: 40
                }}
                />
            </Grid>
  )

所需对象

"contacts" : [
        {
            "name": "asdasdas123da",
            "phone" : 9898989898,
            "email": "[e-mail]",
            "designation" : "Some Manager" ,
            "salutation" : "Mr"
        },
        {
            "name": "asdasdas",
            "phone" : 9898989898,
            "email": "[e-mail]",
            "designation" : "Some Manager" ,
            "salutation" : "Mr"
        }
     ]

标签： javascriptreactjsformsmaterial-uireact-hooks