1

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

[[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在单选按钮中，但我认为我没有正确使用它。

有人提前感谢您的指导吗？

4

1 回答 1

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>
  );
};
于 2020-04-10T17:42:34.147 回答