输入的多个参考，仅适用于最后一个

Question

I'm trying to make a editable table using ref.

In this case I can only get last input's value through ref, but created multiple refs for it.

Why is it any ideas?

Please let me know if you need more info about it.

import React, { useRef } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const Table = props => {
  const materials = Array(7).fill({
    a: "a",
    b: "b",
    aref: useRef(null),
    bref: useRef(null)
  });
  const handle = (index, key, ref) => {
    console.log(index, ref.current.value);
  };
  return (
    <>
      <table>
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
          </tr>
        </thead>
        <tbody>
          {materials.map((item, index) => {
            return (
              <tr key={index}>
                <td>
                  <input
                    onChange={e => handle(index, "a", item.aref)}
                    type="text"
                    ref={item.aref}
                  />
                </td>
                <td>
                  <input
                    onChange={e => handle(index, "b", item.bref)}
                    type="text"
                    ref={item.bref}
                  />
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </>
  );
};

function App() {
  return (
    <div className="App">
      <Table />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

codesandbox: https://codesandbox.io/s/upbeat-breeze-sm7c6

Answer 1

Array.fill(value[, start[, end]]) will fill the array with value between start and end . So, your ref is same objects in your array. Try to change your code like this:

  // ...
  const materials = Array(7).fill(null).map(() => ({
    a: "a",
    b: "b",
    aref: useRef(null),
    bref: useRef(null)
  }))
  // ...

Answer 2

I did a slight modification, which should work as your expectation.

const Table = props => {
  const materials = Array(7);

  for (var i=0;i<materials.length;i++){
    materials[i] = {
      a: "a",
      b: "b",
      aref: React.createRef(),
      bref: React.createRef()
    };
  }

  const handle = (index, key, ref) => {
    console.log(index, ref.current.value);
  };
  return (
    <>
      <table>
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
          </tr>
        </thead>
        <tbody>
          {materials.map((item, index) => {
            return (
              <tr key={index}>
                <td>
                  <input
                    onChange={e => handle(index, "a", item.aref)}
                    type="text"
                    ref={item.aref}
                  />
                </td>
                <td>
                  <input
                    onChange={e => handle(index, "b", item.bref)}
                    type="text"
                    ref={item.bref}
                  />
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </>
  );
};

Answer 3

Your problem is, you are iterating over materials array and creating your input's. In those created input's you are adding ref .

As there is multiple elements with same ref , react might get confuse which one to pick and in a result it is picking up last one to get the values. So this indicates that react need unique ref to be used.

That is why you are getting value for last input but not for others.

---

As per docs ,

There are a few good use cases for refs:

1. Managing focus, text selection, or media playback.
2. Triggering imperative animations.
3. Integrating with third-party DOM libraries.

Avoid using refs for anything that can be done declaratively.

---

So when you have onChange for every input, I think no need to use ref to get value of input. You can directly get the values using e.target.value ,

<input onChange={e => handle(index, "a", e)} type="text" />

const handle = (index, key, e) => {
    console.log(index, e.target.value);
};

Demo

Answer 4

我曾经遇到过同样的问题，一段时间后我意识到我是在静态defaultProps创建引用，因此所有元素的所有引用都是相同的，并且会出现相同的错误