React/Material UI - 单击按钮时更改大小写答案

【问题标题】：React/MaterialUI - Change case on button clickReact/Material UI - 单击按钮时更改大小写
【发布时间】：2020-11-19 04:05:14
【问题描述】：

我正在尝试创建一个 Switch，用户可以在其中选择性别，然后获取适当的表单。当我手动设置性别时，表单已作为组件创建并呈现良好。我卡住的地方是当用户单击按钮时更新性别变量。我知道这可能不是正确的方法，我应该使用 State，但是我的 google-fu 让我失望了，所以我请教各位专家。代码如下：

import React, { Component, constructor } from "react";
import MaleHormone from "../components/maleHormone"
import FemaleHormone from "../components/femaleHormone"
import { Button, Grid, Typography } from "@material-ui/core";

var gender = ""

export default class Hormones extends Component {

  genderSwitch(gender: any) {
    switch (gender) {
      case "Male":
        return (<MaleHormone />);
      case "Female":
        return (<FemaleHormone />);
      default:
        return (<Grid
        container
        spacing={6}
        style={{
          textAlign: "center",
          padding: 20,
          paddingTop: 100,
          justifyContent: "center",
        }}>
          <Typography variant="h4" color="primary">
            Please select your gender
          </Typography>
          <Grid
            container
            spacing={6}
            style={{
              textAlign: "center",
              minHeight: 20,
              padding: 20,
              paddingTop: 30,
              justifyContent: "center",
            }}
            >
            <Button id="male" value="Male" variant="contained" color="secondary" size="large" style={{marginRight: 20}}>
              Male
            </Button>
            <Button id="female" value="Female" variant="contained" color="secondary" size="large">
              Female
            </Button>
          </Grid>
      </Grid>);
    }
  }

  render() {
      return (
      this.genderSwitch(gender)
    );
  }
}

【问题讨论】：

使性别成为状态而不是变量，并使用 setState 更改它。当您选择性别时，它将重新渲染，通过您的开关，并选择正确的形式进行渲染
谢谢费兰。那就是我挣扎的地方。我尝试了几次使用构造函数并设置状态，但我一直在 VS 中收到代码错误并编译问题。你能给我一个线索，让我走上正确的道路吗？

标签： reactjs material-ui

【解决方案1】：

给你，这应该可以：

import React, { Component } from "react";
import MaleHormone from "../components/maleHormone"
import FemaleHormone from "../components/femaleHormone"
import { Button, Grid, Typography } from "@material-ui/core";



export default class Hormones extends Component {
  state = {
    gender: ""
  };

  genderSwitch(gender: any) 
  {
    switch (gender) 
    {
      case "Male":
        return <MaleHormone />;

      case "Female":
        return <FemaleHormone />;

      default:
        return (
          <Grid
            container
            spacing={6}
            style={{
              textAlign: "center",
              padding: 20,
              paddingTop: 100,
              justifyContent: "center"
            }}
          >
            <Typography variant="h4" color="primary">
              Please select your gender
            </Typography>
            <Grid
              container
              spacing={6}
              style={{
                textAlign: "center",
                minHeight: 20,
                padding: 20,
                paddingTop: 30,
                justifyContent: "center"
              }}
            >
              <Button
                id="male"
                value="Male"
                variant="contained"
                color="secondary"
                size="large"
                style={{ marginRight: 20 }}
                onClick = {() => this.setState({gender:"Male"})}
              >
                Male
              </Button>
              <Button
                id="female"
                value="Female"
                variant="contained"
                color="secondary"
                size="large"
                onClick = {() => this.setState({gender:"Female"})}

              >
                Female
              </Button>
            </Grid>
          </Grid>
        );
    }
  }

  render() {
    let genderForm = this.genderSwitch(this.state.gender);

    return genderForm;
  }
}

【讨论】：

谢谢！这做到了！需要注意的是，“return { genderForm }”抛出了一个关于 Objects not valid as a React child 的错误。删除括号解决了错误。
是的，你是对的，我忘记了没有用 () 包裹的 return 语句。我将编辑答案。感谢您的提醒

【解决方案2】：

import {TouchableOpacity, Text} from 'react-native';
export default class Hormones extends Component {
    state = {gender: "Male"}

    ...

    render () {
        return (
            <>
                <TouchableOpacity onPress={()=> { 
                    this.setState(
                      {
                          gender: this.state.gender==="Male"?"Female":"Male"
                      });
                    }
                >
                    <Text>Switch Gender</Text>
                </TouchableOpacity>

                this.switchGender(this.state.gender);
            </>
        );
    }
}

【讨论】：