单击单选按钮时如何处理？

Question

我想要在单击单选按钮时调用一个函数。在这个函数中会有一个二维数组，格式如下：

[[0,0],[1,0],[2,1],[3,0],[4,1]]

数组条目如下所示：[regionNumber, 0 or 1 ]

regionNumber 对应从 0
0为对应的单选按钮未被点击。
1表示对应的单选按钮被点击。

我会把这个二维数组传给另一个组件使用

当单选按钮被点击时，会在二维数组中进行识别，对应的0/1会切换为相反的值

例如：

// this means `regionNumber` 2 and `regionNumber` 4 radio buttons are checked.
[ [0,0], [1,0], [2,1], [3,0], [4,1] ]

// if we click the radio button 4 again (`regionNumber` 4) then it will turn into:    
[ [0,0] , [1,0] , [2,1] , [3,0] , [4,0] ]

选中单选按钮后，将该数组对象发送到 Graph 中。例如，当 [object1,object2,object3] = object1 和 object2 被选中时，他们将完成这个。

import React from 'react';
import { MDBFormInline } from 'mdbreact';
import { MDBBtn } from "mdbreact";
import { Container } from 'reactstrap';
import $ from "jquery";

const Test = props => {
  const total_regions = (JSON.parse(JSON.stringify(props.test)).length); // gets the number of regions

  return (
    // displays radio buttons depending on the number of objects in json

    <div>
    {props.test.map((item, idx) => { 
      return (
        <label key={idx}>
          <input className="region" type="radio" value={idx} />
          <span>{idx}</span> 
        </label>
      );
    })}
    </div>

  );
};
export default Test;

我正在考虑做一个 jQuery 但因为我要在函数内处理数组我不确定 jQuery 是否可以这样做因为我还将调用函数内的另一个组件。

我试过在单选按钮中使用 onClick，但我认为我没有正确使用它。

有没有人有任何指导提前感谢？

Answer 1

只需使用onClick。这是您应该能够适应的示例。

const Test = props => {
  const total_regions = JSON.parse(JSON.stringify(props.test)).length; // gets the number of regions
  const handleClick = (item, idx) => {
    console.log(`item ${item} with index ${idx} clicked`);
  };

  return (
    // displays radio buttons depending on the number of objects in json

    <div>
      {props.test.map((item, idx) => {
        return (
          <label key={idx}>
            <input
              className="region"
              type="radio"
              value={idx}
              onClick={() => handleClick(item, idx)}
            />
            <span>{idx}</span>
          </label>
        );
      })}
    </div>
  );
};

单击单选按钮时如何处理？

How to handle when a radio button is clicked?

javascript

arrays

button

reactjs

mdbreact