react函数组件点击table中的一个input获取他前面所有的input的值

可以通过以下步骤实现：

1. 创建一个状态变量，用来存储所有 input 的值。

const [inputs, setInputs] = useState({});

2. 在每个 input 上添加一个 `onChange` 事件，每次输入时更新对应 input 的值到状态变量中。

<input 
  type="text" 
  value={inputs[index] || ""} 
  onChange={(e) => {
    setInputs({ ...inputs, [index]: e.target.value });
  }} 
/>

这里的 `index` 是 input 在表格中的索引。

3. 在点击对应 input 时，获取其前面所有 input 的值。

const handleClick = (index) => {
  const values = Object.values(inputs).slice(0, index);
  console.log(values);
};

这里使用了 `Object.values` 方法获取所有输入值组成的数组，并使用 `slice` 方法截取前面的一部分。最后将这个数组打印到控制台中。

完整的代码示例：

import React, { useState } from "react";

const Table = () => {
  const [inputs, setInputs] = useState({});

  const handleClick = (index) => {
    const values = Object.values(inputs).slice(0, index);
    console.log(values);
  };

  return (
    <table>
      <tbody>
        <tr>
          <td>
            <input
              type="text"
              value={inputs[0] || ""}
              onChange={(e) => {
                setInputs({ ...inputs, 0: e.target.value });
              }}
            />
          </td>
          <td>
            <input
              type="text"
              value={inputs[1] || ""}
              onChange={(e) => {
                setInputs({ ...inputs, 1: e.target.value });
              }}
            />
          </td>
          <td>
            <input
              type="text"
              value={inputs[2] || ""}
              onChange={(e) => {
                setInputs({ ...inputs, 2: e.target.value });
              }}
            />
          </td>
          <td>
            <button onClick={() => handleClick(2)}>Get Values</button>
          </td>
        </tr>
      </tbody>
    </table>
  );
};

export default Table;