Как справиться, когда радио-кнопка нажата? - PullRequest
Новая
       14

Как справиться, когда радио-кнопка нажата?

1 голос
/ 10 апреля 2020

Я хочу, чтобы функция вызывалась при нажатии переключателя. В этой функции будет двухмерный массив в следующем формате: 

[[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, но я думаю, что не правильно его использую. 1036 * У кого-нибудь есть рекомендации, заранее спасибо?

1 Ответ

1 голос
/ 10 апреля 2020

Просто используйте 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>
  );
};
...