Как сгруппировать переключатели, которые находятся в разных рядах ag-grid - PullRequest
Новая
       17

Как сгруппировать переключатели, которые находятся в разных рядах ag-grid

0 голосов
/ 08 января 2019

Я создаю сетку из нескольких строк и вставляю переключатель в каждую строку, как показано на снимке ниже

enter image description here

Фрагмент кода для определения столбца радиокнопки, как показано ниже, 

columnDefs: [{
                headerName: '',
                field: '',
                tooltipField: '',
                suppressMenu: false,
                suppressFilter: true,
                suppressMovable: true,
                suppressResize: true,
                width: 200,
                cellRendererFramework: this.ButtonCellRenderer
               }]



 ButtonCellRenderer = (params) => {
      return (
        <div style={{margin: 'auto', width: '100%', overflow: 'hidden'}}>
          <div style={{display: 'inline-block'}}>
            <RadioButtonGroup
              name={params.data.bit_rate}
              defaultSelected={this.state.selectedRadioButton}
              debugger //eslint-disable-line
              onChange={handleSelectionChange}
              labelPosition={this.state.labelPosition}
            >
              <RadioButton label='' value='true' enabled='true' />
            </RadioButtonGroup>
          </div>
        </div>
      )
    }

Проблема, с которой я здесь сталкиваюсь, заключается в том, что я не могу сгруппировать переключатель в одну группу RadioGroup, поэтому я не достигаю взаимоисключения. Подскажите, пожалуйста, как сделать его взаимоисключающим.

1 Ответ

0 голосов
/ 08 января 2019

Вы можете достичь этого программно, присвоив всем вашим элементам ввода / радио атрибут name и цикл для всех элементов с одинаковым именем: 

handleClick = () => {
        const elems = document.getElementsByName("rad");
        let selected;
        for(let i = 0; i < elems.length; i++) {
            if(elems[i].checked) {
                selected = elems[i].value;
            }
        }
        console.log(selected);
    };

    render() {

        return (
            <div>
                <input type={"radio"} name={"rad"} defaultChecked={true} value={'radio1'} onClick={this.handleClick}/> radio1 <br/>
                <input type={"radio"} name={"rad"} value={'radio2'} onClick={this.handleClick}/> radio2
            </div>
        );
    }
...