Javascript 将数据从React表传递到输入TextField材质ui

我有一个包含多行和3列的react表，每行有一个编辑按钮，当用户单击任何行的编辑按钮时，我希望该行的名称数据显示在上面的输入文本字段中。 我尝试了Ref和设置状态，但没有一个有效，请帮助。 另外，我还有一个react select字段，所以请告诉我相同的解决方案是否适用于该字段？ 这是完整的代码

import React，{useState，useRef}来自“React”；
从“@material ui/core/TextField”导入TextField；
进口{
桌子
TableCell，
表体，
桌面，
桌椅
}来自“@材料界面/核心”；
常数数据=[
{
id:1，
名称：“tom1”
},
{
id:2，
名称：“tom2”
},
{
id:3，
名称：“tom3”
},
{
id:4，
姓名：“迈克”
}
];
常量演示=（）=>{
const key=useRef（null）；
const[word，setWord]=useState（“”）；
常量focusText=（名称）=>{
key.current.value=名称；
};
返回(
{
设置字（即目标值）；
}}
/>
身份证件
名称
行动
{data.map（项=>(
{item.id}
{item.name}
focusText（item.name）}>编辑
))}
);
};
导出默认演示；

沙盒链接

import React，{useState，useRef}来自“React”；
从“@material ui/core/TextField”导入TextField；
进口{
桌子
TableCell，
表体，
桌面，
桌椅
}来自“@材料界面/核心”；
常数数据=[
{
id:1，
名称：“tom1”
},
{
id:2，
名称：“tom2”
},
{
id:3，
名称：“tom3”
},
{
id:4，
姓名：“迈克”
}
];
常量演示=（）=>{
const key=useRef（null）；
const[word，setWord]=useState（“”）；
const focusText=（id，name）=>{
设置字（名称）；
};
返回(
{
设置字（即目标值）；
}}
/>
身份证件
名称
行动
{
data.map（项=>(
{item.id}
{item.name}
focusText（item.id，item.name）}>编辑{“”}
))
}
);
};
导出默认演示；

import React, { useState, useRef } from "react";
import TextField from "@material-ui/core/TextField";

import {
  Table,
  TableCell,
  TableBody,
  TableHead,
  TableRow
} from "@material-ui/core";
const data = [
  {
    id: 1,
    name: "tom1"
  },
  {
    id: 2,
    name: "tom2"
  },
  {
    id: 3,
    name: "tom3"
  },
  {
    id: 4,
    name: "mike"
  }
];
const Demo = () => {
  const key = useRef(null);
  const [word, setWord] = useState("");
  const focusText = (name) => {
    key.current.value = name;
  };




  return (
    <React.Fragment>
      <TextField
        style={{ width: "100%" }}
        id="outlined-basic"
        variant="outlined"
        value={word}
        size="small"
        color="primary"
        ref={key}
        onChange={e => {
          setWord(e.target.value);
        }}
      />
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>id</TableCell>
            <TableCell>name</TableCell>
            <TableCell>action</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>{data.map(item => (
               <TableRow>
                   <TableCell align="left">
                        <p style={{ fontSize: "13px", margin: "0px" }}>{item.id}</p>
                   </TableCell>
                  <TableCell align="left">
                    <p style={{ fontSize: "13px", margin: "0px" }}>{item.name}</p>
                  </TableCell>
                    <TableCell>
                      <button onClick={() => focusText(item.name)}>edit</button>
                    </TableCell>
              </TableRow>
    ))}</TableBody>
      </Table>
    </React.Fragment>
  );
};
export default Demo;

import React, { useState, useRef } from "react";
import TextField from "@material-ui/core/TextField";

import {
  Table,
  TableCell,
  TableBody,
  TableHead,
  TableRow
} from "@material-ui/core";
const data = [
  {
    id: 1,
    name: "tom1"
  },
  {
    id: 2,
    name: "tom2"
  },
  {
    id: 3,
    name: "tom3"
  },
  {
    id: 4,
    name: "mike"
  }
];
const Demo = () => {
  const key = useRef(null);
  const [word, setWord] = useState("");
  const focusText = (id, name) => {
    setWord(name);
  };

  return (
    <>
      <TextField
        style={{ width: "100%" }}
        id="outlined-basic"
        variant="outlined"
        value={word}
        size="small"
        color="primary"
        ref={key}
        onChange={e => {
          setWord(e.target.value);
        }}
      />
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>id</TableCell>
            <TableCell>name</TableCell>
            <TableCell>action</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
        {
          data.map(item => (
            <TableRow key={item.id}>
              <TableCell align="left">
                <p style={{ fontSize: "13px", margin: "0px" }}>{item.id}</p>
              </TableCell>
              <TableCell align="left">
                <p style={{ fontSize: "13px", margin: "0px" }}>{item.name}</p>
              </TableCell>
              <TableCell>
                <button onClick={() => focusText(item.id, item.name)}>edit</button>{" "}
              </TableCell>
            </TableRow>
          ))
        }</TableBody>
      </Table>
    </>
  );
};
export default Demo;