Я не получаю значение об обмене материалами группы переключателей? - PullRequest
Новая
       22

Я не получаю значение об обмене материалами группы переключателей?

0 голосов
/ 15 мая 2019

Я использую togglebuttongroup материала UI. Но на смену ебенту я не возможность получить значение выбранной вкладки. Также я не могу получить цель. Когда я нажимаю на кнопку, я получаю цель, которая не правый. 

``````````
 <FormControlLabel 
          margin="normal"
          label="Private ?   "
          labelPlacement="start"
              control={
               <div style={{paddingTop : 10, paddingLeft: 20}} >
                <ToggleButtonGroup 
                    name = 'isprivate'
                    className = "tglebtngrp" 
                    value={this.state.isprivate}
                    onChange={this.handleChange}>
                  <ToggleButton value="Yes">
                      Yes
                  </ToggleButton>
                   <ToggleButton value="No">
                      No
                  </ToggleButton>
                </ToggleButtonGroup>
                </div>
              } /> 

  On Change function:
```````````````````````
    handleChange = (event) => {
   console.log(event.target);
    this.setState({[event.target.name] : event.target.value});
    console.log(this.state);
    }
`````````````````````````````

Также мне нужно показать выбранную вкладку. Поэтому я попытался сделать это. 

`````````````
  <ToggleButton className={this.state.isprivate=='Yes' ? 
   classes.active_tab :classes.default_tabStyle}  
                     value="Yes"> 

   CSS:
        default_tabStyle:{
        color: 'black',
        fontSize:11,
       backgroundColor: 'blue',
        },

      active_tabStyle:{
        fontSize:11,
          color: 'white',
        backgroundColor: 'red',
     },
`````````````````````

1 Ответ

0 голосов
/ 12 июня 2019

На примере веб-сайта реакции вы можете получить значение через параметр в (вашей) функции handleChange.

Сначала у вас есть const: 

const [alignment, setAlignment] = React.useState("left");

Затем вы можете использовать это const в своем HTML-коде, как здесь (строка 3): 

<div className={classes.toggleContainer}>
      <ToggleButtonGroup
        value={alignment}
        exclusive
        onChange={handleAlignment}
      >
        <ToggleButton value="left">
          <FormatAlignLeftIcon />
        </ToggleButton>
        <ToggleButton value="center">
          <FormatAlignCenterIcon />
        </ToggleButton>
        <ToggleButton value="right">
          <FormatAlignRightIcon />
        </ToggleButton>
        <ToggleButton value="justify" disabled>
          <FormatAlignJustifyIcon />
        </ToggleButton>
      </ToggleButtonGroup>
    </div>

С помощью функции handleAlignment (строка 5) вы можете изменить и получить текущее значение. 

const handleAlignment = (event, newAlignment) => {
    setAlignment(newAlignment);
    console.log(newAlignment);
};

В зависимости от того, как настроены ваши переключатели, вы получите одно значение (эксклюзивный выбор, т.е. вкладки) или массив значений (множественный выбор)

enter image description here

Рабочий пример, который вы можете найти в this кодыandbox .

...