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

Posted 2023-03-27

【中文标题】如何检测 React App 中更改的单选按钮

【英文标题】：How to detect radio button changed in React App

【发布时间】：2021-10-20 11:17:20

【问题描述】：

我有一个反应应用程序，其中有一个单选按钮表，我正在循环它们

这是我的代码：

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 库单选按钮来设置样式

【问题讨论】：

和html一样：onChange

是的，我确实尝试实现它，但它没有触发

分享你的尝试+CustomInput的来源。

我想澄清一些事情。您可以发布permissions 对象的样本吗？当用户更改单选输入中的选择时，您是否希望更改 permissions 对象中的值？

@RifkyNiyas 我已经用所有必要的内容更新了我的问题

【参考方案1】：

需要进行一些修复。

使用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

【参考方案2】：

将第二个参数添加到 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) />

【讨论】：

我试过onChange 没有触发。即使我将 CustomInput 更改为普通 html input ，它也无法正常工作

你试过这个语法：e => setCurrentValue(e.target.value)?

是的，我做到了，也没有触发。另外，我更新了我的问题，所以现在很清楚了