使用 id 或其他属性而不是名称来反应复选框状态答案

【问题标题】：React checkbox state with id or other attributes instead of name使用 id 或其他属性而不是名称来反应复选框状态
【发布时间】：2021-01-03 03:06:39
【问题描述】：

在react中，是否可以通过id属性或data-*等其他属性来管理多个复选框的状态？

目前我使用的是name 属性，但是在我的项目中，由于项目的复杂性，我需要使用id 或最好使用data-*，但似乎在@987654327 @这是不可能的。

还是我不明白？

import React, { useState } from 'react';
import someData from './someData'

function Checkbox({ name, id, label, checked, onChange }) {
  return (
    <span>
      <input 
        type="checkbox" 
        name={name} 
        id={id} 
        checked={checked} 
        onChange={onChange} 
      />
      <span>{label}</span>
    </span>
  );
}

function App() {
  const [isChecked, setIsChecked] = useState()

  const onCheckboxChange = event => {
    const target = event.currentTarget;
    const name = target.name
    const id = target.id;
    const checked = target.checked;

    setIsChecked({
      ...isChecked,
      [id]: checked // using "id" seems to not work here.
    })
  }

  return (
    someData.map(item => {
      return (
        <Checkbox
          name={item.name}
          id={item.id}
          label={item.name}
          onChange={onCheckboxChange}
          checked={isChecked}
        />
      );
    }
  );
}

【问题讨论】：

标签： javascript html reactjs checkbox

【解决方案1】：

在 React 中做任何你需要做的事情都没有问题。

您可以使用dataset API 访问data-* 属性值以更新复选框更改时的状态（例如，如果您将data-chkboxname 属性分配给您的复选框）：

onCheckboxChange = ({target:{checked, dataset:{chkboxname}}}) => {
          setIsChecked({
            ...isChecked,
            [chkboxname]: checked
          })
        }

以下是一个快速的概念验证现场演示：

const { useState } = React,
      { render } = ReactDOM,
      rootNode = document.getElementById('root')
      
const App = () => {
  const [isChecked, setIsChecked] = useState({}),
        onCheckboxChange = ({target:{checked, dataset:{chkboxname}}}) => {
          setIsChecked({
            ...isChecked,
            [chkboxname]: checked
          })
        },
        onFormSubmit = e => {
          e.preventDefault()
          console.log(isChecked)
        }
        
  return (
    <form onSubmit={onFormSubmit}>
    {
      ['chckbox1', 'chckbox2', 'chckbox3'].map(checkbox => (
        <label key={checkbox}>
          {checkbox}
          <input 
            type="checkbox" 
            data-chkboxname={checkbox}
            onChange={onCheckboxChange}
            checked={isChecked[checkbox]}
          />
        </label>
      ))
    }
    <input type="submit" value="submit" />
   </form>
  )        
}

render (
  <App />,
  rootNode
)

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"&gt;&lt;/script&gt;&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"&gt;&lt;/script&gt;&lt;div id="root"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

这样试试

return someData.map((item) => {
    return (
      <Checkbox
        name={item.name}
        id={item.id}
        label={item.name}
        checked={item.checked}
      />
    );
  });

【讨论】：