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

【问题标题】：How to get parent div in handleChange with React如何使用 React 在 handleChange 中获取父 div
【发布时间】：2022-02-13 04:38:04
【问题描述】：

我有多个动态 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>
            })}

想法，是在检查时将border-2 border-teal-500 类添加到input 的父div。

这是我的handleChecked：

  function handleChecked(e) {
    // code here
  }

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

知道我该如何处理吗？

【问题讨论】：

标签： javascript reactjs tailwind-css

【解决方案1】：

无论如何，您都不应该在 React 中使用 getElementById（或任何其他原生 JS DOM 方法）——而是在状态中存储和更改值。您可以通过使input 成为受控组件并将检查的值存储在一个数组或workout 中来利用这一点 - 然后，当返回 JSX 时，您只需要检查x 变量（该项目是iterated over) 表示是否应检查当前输入 - 这还将告诉您父级是否应该具有不同的类。

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" />

【讨论】：