时间戳

首页 > 解决方案 > 如何使用 useRef 在 React Hooks 中获取被点击的元素

reactjs - 如何使用 useRef 在 React Hooks 中获取被点击的元素

问题描述

我在玩 React Hooks 并尝试创建一个手风琴。我正在尝试从数组中迭代它。所以我有 2data，当我安慰索引时，我得到了单击按钮的确切索引。但是当我安慰 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>

标签： reactjs

解决方案

由于您正在map()使用 ref ，因此请使用 ref 和 A​​rray

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>

推荐阅读