在引用数组中找到被点击的元素（useRef）

IT技术 javascript reactjs checkbox components use-ref
2021-04-28 09:24:28

如果我有一组引用值，我如何找到被点击的项目，我使用了 useRef

import { useRef, useState, useEffect } from 'react';

function App() {
  const checkboxes = useRef({});
  var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
  var myArrValues = []
  const [arrValues, setArrValues] = useState(false)

  for (let i = 0; i < arr.length; i++)
    myArrValues.push(i % 2 === 0)

  useEffect(() => {
    setArrValues(myArrValues)
  }, [])

  const setcheckBoxValue = (e) => {
    console.log(checkboxes);
  }

  return (
    <div className="App">
      {arr.map( (x, idx) =>
        <input 
          type="checkbox" 
          id={idx.toString()} 
          name={idx.toString()} 
          checked={arrValues[idx]}
          ref={ (el) => checkboxes.current[idx] = el } 
          onChange={(e) => setcheckBoxValue(e)}
        ></input>)
      }
    </div>
  );
}

export default App;

在 setcheckBoxValue 方法中，我需要知道点击了哪个复选框提前谢谢

拉斐尔

1个回答

我不认为 ref （或未arr使用的字符）在这里做任何有用的事情。如果要切换给定复选框的状态，只需跟踪渲染闭包中正在迭代的索引，并在单击时传递它：

const { useRef, useState, useEffect } = React;

function App() {
  const [arrValues, setArrValues] = useState(
    // use a function here to only create the initial array on mount
    () => Array.from(
      { length: 10 },
      (_, i) => i % 2 === 0
    )
  );

  const setcheckBoxValue = (i) => {
    setArrValues(
      arrValues.map((v, j) => j !== i ? v : !v)
    );
  }

  return (
    <div className="App">
      {arrValues.map( (val, i) =>
        <input 
          key={i}
          type="checkbox" 
          checked={val}
          onChange={() => setcheckBoxValue(i)}
        ></input>)
      }
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('.react'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

其它你可能感兴趣的问题
上一篇从 Map 连接本地路径 + 动态图像 - React.Js 下一篇React Native 使用来自不同导出函数的助手 api 文件中的上下文