React Table行数据传递至Material-UI TextField及react-select问题求助

我来帮你捋清楚问题并给出解决方案～首先得明确：你当前的TextField是受控组件（通过value={word}绑定了状态），这时候直接用ref修改DOM的value完全行不通——React会优先使用状态word的值来渲染输入框，你手动改DOM的操作会被React直接覆盖掉。正确的思路是直接更新状态，让React帮你同步UI。

修正TextField的实现 #

只需要修改你的focusText函数，直接调用setWord更新状态即可，完全不需要依赖ref：

import React, { useState } 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 [word, setWord] = useState("");
  
  // 直接更新状态，让React自动同步输入框内容
  const focusText = (name) => {
    setWord(name);
  };

  return (
    <React.Fragment>
      <TextField
        style={{ width: "100%" }}
        id="outlined-basic"
        variant="outlined"
        value={word}
        size="small"
        color="primary"
        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}> {/* 给列表项加key是React的最佳实践，避免渲染警告 */}
              <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;

关于react-select的适配 #

这个解决方案完全适用于react-select组件！因为react-select同样是受控组件，它通过value和onChange属性来控制选中状态，逻辑和TextField高度一致。

举个简单的适配例子：

import React, { useState } from "react";
import Select from 'react-select';
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" }
];

// 转换为react-select需要的选项格式
const selectOptions = data.map(item => ({ value: item.name, label: item.name }));

const Demo = () => {
  const [selectedOption, setSelectedOption] = useState(null);
  
  const handleEdit = (item) => {
    // 找到对应选项对象，设置到状态中
    const targetOption = selectOptions.find(opt => opt.value === item.name);
    setSelectedOption(targetOption);
  };

  return (
    <React.Fragment>
      <Select
        value={selectedOption}
        onChange={setSelectedOption}
        options={selectOptions}
      />
      <Table>
        {/* 表格部分和之前的代码一致，只是把按钮点击事件换成handleEdit */}
        <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={() => handleEdit(item)}>edit</button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </React.Fragment>
  );
};

export default Demo;

点击编辑按钮时，只要把对应选项对象设置到状态中，react-select就会自动同步显示选中的内容啦。

内容的提问来源于stack exchange，提问作者Himanshu Sain