如何使用 React 在 handleChange 中获取父 div

Question

我有多个 div 是动态的（这取决于访问者检查的过滤器）。所以我不能使用 getElementById.

如果检查了输入，我需要让父 div 更改其 CSS。

这是我的代码：

            {workout?.map(x => {
                return <div className='relative bg-gray-200 p-4 rounded-md my-3 mx-2' key={x.name}>
                    <input onClick={handleChecked} className='absolute right-0 top-0' type="checkbox" />
                    <div className='flex'>
                        <img className='w-2/6 rounded mr-5' src={`${x.path}`} alt={x.name} />
                        <div className='w-4/6'>
                            <h2 className='text-xl'>{x.name}</h2>
                            <p>Nombre de séries : {x.set}</p>
                            <p>Nombre de rép : {x.reps}</p>
                            {x.secondary ? <p>Muscles solicités : <br />
                                <span className='space-x-2'>
                                    {x?.secondary?.map(k => {
                                        return <span className='bg-white px-1 rounded-md' key={k}>{k}</span>
                                    })}
                                </span>
                            </p> : null}
                        </div>
                    </div>
                </div>
            })}

想法是在检查时向 input 的父 div 添加一个 border-2 border-teal-500 class。

这是我的 handleChecked：

  function handleChecked(e) {
    // code here
  }

我看到我不得不使用 parentNode 但问题是，我不能将当前输入存储在变量中，因为它是动态的。每个项目都有自己的输入。

知道我该如何处理吗？

Answer 1

你不应该在 React 中使用 getElementById（或任何其他 vanilla JS DOM 方法）——而是在状态中存储和更改值。您可以通过使 input 成为受控组件，并将检查的值存储在数组中或 workout 中来利用这一点——然后，在返回 JSX 时，您只需要检查 x 变量（被迭代的项目）表示当前输入是否应该被检查 - 这也会告诉你父是否应该有不同的 class.

const makeHandleChecked = (i) => (e) = {
  setWorkout(
    workout.map(
      (w, j) => j !== i ? w : { ...w, checked: e.target.checked }
    )
  );
};

{workout?.map((x, i) => (
  <div className={`relative bg-gray-200 p-4 rounded-md my-3 mx-2${x.checked ? ' checked' : ''}`} key={x.name}>
    <input onClick={makeHandleChecked(i)} checked={x.checked} className='absolute right-0 top-0' type="checkbox" />

如何使用 React 在 handleChange 中获取父 div

How to get parent div in handleChange with React

javascript

reactjs

tailwind-css