获取动态创建的同一个子组件的值

Question

我在 MUI 卡内创建了 MUI TextFiled 的子组件。

import * as React from 'react';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import TextField from '@mui/material/TextField';

const bull = (
  <Box
    component="span"
    sx={{ display: 'inline-block', mx: '2px', transform: 'scale(0.8)' }}
  >
  </Box>
);

export default function BasicCard({ dataObj }) {
 const [value, setValue] = React.useState(0);
 const location = useLocation();

 React.useEffect(() => {
   setValue(dataObj.weight);
 }, [location, dataObj])

  return (
    <Card sx={{ minWidth: 75}}>
      <CardContent>
        <TextField type="number" value={value} />
      </CardContent>
    </Card>
  );
}

根据现有的以下数据，我动态渲染了文本字段。所以基本上我已经为对象中的每个数据调用了同一个子组件 3 次

[
{ "metric": "AAA", "weight": 10},
{ "metric": "BB", "weight": 20},
{ "metric": "CCC", "weight": 30},
]

如果我们手动更改 TextField 的值，如何在单击父组件中的按钮时获取所有三个数据（更改或未更改）的值

非常感谢任何帮助

谢谢，

Answer 1

您不需要在父组件中调用子组件3次。您可以使用映射来实现此目的，并且为了在父组件中获取值，您需要在父组件中创建初始状态，然后需要将相关道具传递给子组件。请检查以下示例：-

import * as React from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import TextField from '@mui/material/TextField';

function BasicCard({ dataObj, value, onChange }) {
  const handleChange = (event) => {
    onChange(event.target.value, dataObj.metric);
  };

  return (
    <Card sx={{ minWidth: 75}}>
      <CardContent>
        <TextField type="number" value={value} onChange={handleChange} />
      </CardContent>
    </Card>
  );
}


export default function ParentComponent() {
  const initialData = [
    { "metric": "AAA", "weight": 10},
    { "metric": "BB", "weight": 20},
    { "metric": "CCC", "weight": 30},
  ];

  const [data, setData] = React.useState(initialData);

  const handleCardChange = (newValue, metric) => {
    setData(prevData => {
      return prevData.map(item => {
        if (item.metric === metric) {
          return { ...item, weight: newValue };
        }
        return item;
      });
    });
  };

  const handleClick = () => {
    console.log(data);
  };

  return (
    <div>
      {data.map((item) => (
        <BasicCard
          key={item.metric}
          dataObj={item}
          value={item.weight}
          onChange={handleCardChange}
        />
      ))}
      <button onClick={handleClick}>Get Values</button>
    </div>
  );
}

这里我们将 onChange、item 传递给子组件，handleClick 函数中有一个控制台语句，因此您可以通过在浏览器中检查来查看控制台中所有 3 个字段的值。