我在切换按钮组材质ui上没有获得值的变化吗？

Question

我正在使用材质ui的togglebuttongroup。但是，在变化中，我不是    能够获取所选标签的值。我也无法获得    目标。当我单击按钮时，我得到的目标不是    是的。

``````````
 <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',
     },
`````````````````````

Answer 1

使用react website的示例，您可以通过（您的）handleChange函数中的参数获取值。

首先，您有一个const：

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

然后您可以在html代码中使用此const，如下所示（第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);
};

根据切换按钮的设置方式，您将获得一个值（专有选择，即制表符）或一组值（多个选择）

您可以在this codesandbox中找到一个工作示例。