从 switch material-ui 返回是或否答案

【问题标题】：return yes or no from switch material-ui从 switch material-ui 返回是或否
【发布时间】：2021-03-18 08:01:36
【问题描述】：

您好，我正在构建一个表单，我可以使用我的 onchange 和 state 返回其他输入的值。但是当我尝试实现开关时，我什至没有得到任何回报，甚至是真假。切换时如何让开关返回是或否标签？这是我将使用的 material-ui 组件

材料.js

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import FormGroup from '@material-ui/core/FormGroup';
import Switch from '@material-ui/core/Switch';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';


export default function CustomizedSwitches() {

  return (
<FormGroup>
  <Typography component="div">
    <Grid component="label" container alignItems="center" spacing={1}>
      <Grid item>No</Grid>
      <Grid item>
        <AntSwitch />
      </Grid>
      <Grid item>Yes</Grid>
    </Grid>
  </Typography>
</FormGroup>
);
}

这就是我如何处理表单中的输入

form.js

class App extends Component {

// constructor
  constructor(props) {
    super(props);


    // initial state
    this.state = {
        formValues                : {},//this is where i store my input values
    };

 // i use this to submit info
this.submitInformation        = this.submitInformation.bind(this);

  }


  handleChange(event) {
    event.preventDefault();
    const isCheckbox = event.target.type==='checkbox'; //implementing this does not work why??


    let formValues = this.state.formValues
    let name = event.target.name;
    let value = isCheckbox ? event.target.checked : event.target.value; //is the problem here??

    formValues[name] = value

    this.setState({formValues});
  }



 async submitInformation(event){

    event.preventDefault();
    alert('You have submitted the form.')

    let sharePointStructure = {
        response                                     : this.state.formValues[false],
        ToolName                                  : this.state.formValues["ToolName"],
}


  return (
  <div className="App">
    <div >

      <form className="float-container" onSubmit = {this.submitInformation}>

          <div>
             
              <CustomizedSwitches 
              name="response" 
              onChange={this.handleChange.bind(this)} 
              checked={this.state.formValues["response"]}/>
          </div>
       <form/>
    </div>

)

【问题讨论】：

标签： reactjs material-ui toggle togglebutton

【解决方案1】：

你正在改变状态，这可能会导致一些问题。通过制作状态的浅表副本来尝试这个：

handleChange(event) {
    event.preventDefault();
    const isCheckbox = event.target.type==='checkbox'; //implementing this does not work why??


    let formValues = {...this.state.formValues} //make a shallow copy of formValues
    let name = event.target.name;
    let value = isCheckbox ? event.target.checked : event.target.value; //is the problem here??

    formValues[name] = value // then mutate the copied state

    this.setState({formValues});
}

【讨论】：