将文本添加到Switch formcontrol并使用材质ui进行切换

问题描述

我正在使用Material UI的Switch组件，并且想在其中添加文本.另外，我需要使其呈正方形.

I am using Material UI's Switch component and I want to add text inside it. Also I need to make it square in shape.

如何在 Switch 组件中添加文本.选择时应显示为开，默认情况下应显示为关.我正在Reactjs表单的Formcontrol中使用Material UI的Switch.

How to I add text inside the Switch component. It should say on when selected and off when default. I am using Material UI's Switch inside Formcontrol in reactjs form.

<FormControlLabel
  label="Private ? "
  labelPlacement="start"
  control={
    <Switch
       checked={this.state.checked}
       onChange={this.handleChange}
       color='primary'
    />
  }
/>

推荐答案

下面是一个如何根据Switch的状态以及方形Switch的样式更改文本的示例:

Here is an example of how to change the text based on the state of the Switch as well as the styles for a square Switch:

import React from "react";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Switch from "@material-ui/core/Switch";
import { withStyles } from "@material-ui/core/styles";

const styles = {
  // use "icon" instead of "thumb" in v3
  thumb: {
    borderRadius: 0
  }
};
class SwitchLabels extends React.Component {
  state = {
    checked: true
  };

  handleChange = event => {
    this.setState({ checked: event.target.checked });
  };

  render() {
    return (
      <FormControlLabel
        control={
          <Switch
            classes={this.props.classes}
            checked={this.state.checked}
            onChange={this.handleChange}
            value="checked"
            color="primary"
          />
        }
        labelPlacement="start"
        label={this.state.checked ? "On" : "Off"}
      />
    );
  }
}

export default withStyles(styles)(SwitchLabels);

这篇关于将文本添加到Switch formcontrol并使用材质ui进行切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！