如何检测 React App 中更改的单选按钮

Question

我有一个 React 应用程序，其中有一个 table 个单选按钮，我正在循环浏览它们

这是我的代码：

const setValue = (item, position) => {
    switch(item[0]) {
        case 'dashboard':
            if(permissions.dashboard == item[1]) {
                return true;
            }
            break;
        case 'user_management':
            if(permissions.user_management == item[1]) {
                return true;
            }
            break;
        case 'users_feedback':
            if(permissions.users_feedback == item[1]) {
                return true;
            }
            break;
        case 'settings':
            if(permissions.settings == item[1]) {
                return true;
            }
            break;
        case 'content_management':
            if(permissions.content_management == item[1]) {
                return true;
            }
            break;
        case 'influencers':
            if(permissions.influencers == item[1]) {
                return true;
            }
            break;
    }
}

const handleChangePermission = (e) => {
    console.log('Handle Change');
}

Object.entries(permissions).map((item, i) => (
     <tr className="permission-row" key={item[0]}>
         <td>{item[0]}</td>
         <td><input type="radio" id={item[0] + i} name={item[0]} defaultChecked={setValue(item, i)}  onChange={(e) => handleChangePermission(e.target.value)}/></td>
         <td><input type="radio" id={item[0] + i} name={item[0]} defaultChecked={setValue(item, i)} onChange={(e) => handleChangePermission(e.target.value)}/></td>
         <td><input type="radio" id={item[0] + i} name={item[0]} defaultChecked={setValue(item, i)}  onChange={(e) => handleChangePermission(e.target.value)}/></td>
     </tr>
))

这是它的样子：

这是我拥有的权限对象：

{
"dashboard": 3,
"user_management": 3,
"users_feedback": 3,
"settings": 3,
"content_management": 3,
"influencers": 3
}

我有一个具有默认值的对象，称为权限，我成功地遍历它们并显示正确的数据。我的问题是，如何检测单选按钮的变化，以便我可以在该对象中进行更改 permissions

编辑：我添加了 onChange 方法，但它仍然没有触发似乎在这里下注的问题 ??

P.S 我正在使用 reactstrap 库单选按钮进行样式设置

Answer 1

将第二个参数添加到 map（它像迭代器一样工作 - 从 0 到数组的最后一个元素 - [0,1,2,3,4...] :

object.map((number, i) =>
  <li defaultChecked ={() => setValue(item, i)}></li>
);

检测收音机的变化 - 仅添加 onChange() 功能：

const function = () => {
//your code
}

<CustomInput onChange={() => function} type="radio" id={item[0] + i} name={item[0]} defaultChecked={setValue(item, i)} />

Answer 2

需要进行一些修复。

使用 onClick 而不是 onChange 事件来执行带有单选按钮的功能。 Refer this answer for more.
根据您的要求，单选按钮的value应该分别硬编码为value=1、value=2、value=3。
按如下方式修改您的 handleChangePermission。

JSX

  <td>
      <input
          type="radio" id={item[0] + i} 
          name={item[0]} defaultChecked={setValue(item, i)} 
          value="1" onClick={handleChangePermission} />
   </td>

修改函数

const handleChangePermission = (e) => {
    const name = e.target.name;
    const value = parseInt(e.target.value);
    permissions[name] = value;
  };

这里我们简单定义handleChangePermission函数来接受synthetic event，这样我们就可以访问单选输入按钮的name和value。由于单选按钮的 name 和 value 对于 permissions 对象的键和值是相同的值，我们可以分配访问键并修改值，如上

Here is the solution on sandbox

如何检测 React App 中更改的单选按钮

How to detect radio button changed in React App

javascript

radio

reactjs