單擊單選按鈕時如何處理？

Question

我希望在單擊單選按鈕時調用 function 。 在這個 function 中會有一個二維數組，格式如下：

[[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] ]

選中單選按鈕后，將數組的 object 發送到 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;

I was thinking of doing a jQuery but because ill be handling an array within the function I was unsure if jQuery could do this as I also will call another component within the function.

我嘗試在單選按鈕中使用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>
  );
};