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

在使用Material-UI的多个TextArea组件时，如果它们具有相同的onchange功能，你可以通过以下步骤获取标签和值：

首先，为每个TextArea组件添加一个唯一的标识符（例如id属性），以便能够区分它们。
在React组件中，创建一个状态变量来存储所有TextArea的值。可以使用useState钩子函数来实现这一点。例如：

import React, { useState } from 'react';

const MyComponent = () => {
  const [textAreaValues, setTextAreaValues] = useState({});

  const handleTextAreaChange = (event) => {
    const { id, value } = event.target;
    setTextAreaValues((prevValues) => ({
      ...prevValues,
      [id]: value,
    }));
  };

  return (
    <div>
      <textarea id="textarea1" onChange={handleTextAreaChange} />
      <textarea id="textarea2" onChange={handleTextAreaChange} />
      {/* 添加更多的TextArea组件 */}
    </div>
  );
};

在上面的代码中，我们使用了一个名为textAreaValues的状态变量来存储所有TextArea的值。handleTextAreaChange函数会在每个TextArea的onchange事件触发时被调用，并将相应的标签id和值更新到textAreaValues中。

现在，你可以通过访问textAreaValues对象来获取每个TextArea的标签和值。例如，你可以在组件中的某个事件处理程序中使用textAreaValues对象来执行特定的操作，如打印标签和值：

const handleButtonClick = () => {
  Object.entries(textAreaValues).forEach(([id, value]) => {
    console.log(`TextArea标签: ${id}`);
    console.log(`TextArea值: ${value}`);
  });
};

上述代码将遍历textAreaValues对象的每个键值对，并打印出每个TextArea的标签和值。

这是一个基本的示例，你可以根据自己的需求进行修改和扩展。至于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体的云计算品牌商，建议你参考腾讯云官方文档或搜索相关资源来了解与云计算相关的产品和服务。