Question

我正在与React Hooks一起玩，并且尝试制作手风琴。我正在尝试从数组迭代它。所以我有2data，当我管理索引时，我得到的是被单击按钮的确切索引。但是当我操纵ref时，我得到的是第二个的ref，而不是第一个的ref。

这是怎么回事？是反应中的错误吗？

这是示例代码

 const content = useRef(null);


    const accordionClick = (id) => {
        setHeightState(setActive === false ? "0px" : `${content.current.scrollHeight}px`);
        SetCustomIndex(id);
        console.log(id);
        console.log(content );
    };

 items.general.map((data, index) => (
      <div className={`accordion-container`} key={index}>
         <button className{`accordion ${setActive}`} onClick{()=>accordionClick(index)}>
            {data}
          </button>

           <div
              className={`panel`}
              ref={content}
              data-id={index}
              style={{
                height: `${setHeight}`,
             }}
               data-id={index}
            >
             <p className="description-14">{data.item.main}</p>
            </div>

Answer 1

由于您使用的是map()，因此将ref与Array一起使用

const inputRef = useRef([]);

ref={el => inputRef.current[index] = el}

用法

inputRef.current[index];

可重现的最小样品：

const App = () => {
const list = [...Array(4).keys()];
const inputRef = React.useRef([]);
const handler = idx => e => {
  const next = inputRef.current[idx + 1];
  if (next) {
    next.focus()
  }
};
return (
  <div className="App">
    <div className="input_boxes">
      {list.map(x => (
        <input
          key={x}
          ref={el => inputRef.current[x] = el}
          onChange={handler(x)}
        />
      ))}
    </div>
  </div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

如何使用useRef获取React Hooks中的clicked元素

1 个答案: