Javascript ReactJS-单选按钮；onClick"；事件未被触发

我是个新手。我知道这是一个基本问题，但我无法通过单选按钮触发事件。在我的网页中，我有两个单选按钮用于显示性别信息。这些单选按钮的名称相同

当用户单击单选按钮时，我想设置“我的状态”值。我尝试了网络上提到的所有解决方案，但我无法设置性别值

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class App extends Component {
  constructor(props) {
    super(props)
    this.renderGender = this.renderGender.bind(this)
    this.setGender = this.setGender.bind(this)
    this.state = {
      loading: false,
      error: false,
      form: {},
      gender: 'male'
    }
  }

  setGender(e) {
    this.setState({
      gender: e.target.value
    })
  }

  render() {
    return (
      <div className="container main">
        {this.state.error ? (
          <div className="alert alert-danger" role="alert">
            Error
          </div>
        ) : null}
        <div className="row form-container">
          <div className="col-md-7">
            <div className="jumbotron jumbotron-fluid">
              <div className="container">. . .</div>
            </div>
          </div>
          <div className="col-md-5">
            <form id="register-form" method="POST" onSubmit={this.onSubmit} autoComplete="off">
              <input type="hidden" autoComplete="off" disabled />
              {this.renderGender()}
            </form>
          </div>
        </div>
      </div>
    )
  }

  renderGender() {
    return (
      <div>
        <label htmlFor="">Gender</label>
        <input type="radio" onClick={this.setGender} value="FEMALE" defaultChecked name="gender" /> Female
        <input type="radio" onClick={this.setGender} value="MALE" name="gender" /> Male
      </div>
    )
  }
}

App.propTypes = {}

export default App

import React，{Component}来自“React”
从“道具类型”导入道具类型
类应用程序扩展组件{
建造师（道具）{
超级（道具）
this.renderGender=this.renderGender.bind（this）
this.setGender=this.setGender.bind（this）
此.state={
加载：false，
错误：false，
表格：{}，
性别：'男性'
}
}
赛特性别（e）{
这是我的国家({
性别：e.目标价值
})
}
render（）{
返回(
{this.state.error(
错误
)：null}
. . .
{this.renderGender（）}
)
}
renderGender（）{
返回(
性别
女性
男性
)
}
}
App.propTypes={}
导出默认应用程序

---

当用户单击单选按钮时，不会调用我的设置性别方法。这段代码中我的错误是什么？

在输入单选按钮中将onClick更改为onChange

改变

   <input type="radio" onClick={this.setGender} value="FEMALE" defaultChecked name="gender" />

到

---

在输入单选按钮中将onClick更改为onChange

改变

   <input type="radio" onClick={this.setGender} value="FEMALE" defaultChecked name="gender" />

到

---

如果您想将性别的状态变量保存为整数，您可以处理它 在handleChange（）函数中，如下所示：

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      gender: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const { name, value } = event.target;
    this.setState({ [name]: value === "male" ? 1 : 0 });
  }

  render() {
    const GENDER_TYPE = {
      1: "male",
      0: "female"
    };

    return (
      <div className="App">
        <h1>Radio batton example</h1>
        <label>
          <input
            type="radio"
            name="gender"
            value="male"
            checked={this.state.gender === 1}
            onChange={this.handleChange}
          />{" "}
          Male
        </label>
        <br />
        <label>
          <input
            type="radio"
            name="gender"
            value="female"
            checked={this.state.gender === 0}
            onChange={this.handleChange}
          />{" "}
          Female
        </label>

        <p>Chosen gender: {GENDER_TYPE[this.state.gender]}</p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

从“React”导入React；
从“react dom”导入react dom；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
性别：“
};
this.handleChange=this.handleChange.bind（this）；
}
手变（活动）{
常量{name，value}=event.target；
this.setState（{[name]：value==“male”？1:0}）；
}
render（）{
常数性别类型={
1:“男性”，
0：“女性”
};
返回(
无线电营示例
{" "}
男性


{" "}
女性
所选性别：{gender_TYPE[this.state.gender]}

);
}
}
render（
如果要将性别的状态变量保存为整数，则可以处理该变量
在handleChange（）函数中，如下所示：

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      gender: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const { name, value } = event.target;
    this.setState({ [name]: value === "male" ? 1 : 0 });
  }

  render() {
    const GENDER_TYPE = {
      1: "male",
      0: "female"
    };

    return (
      <div className="App">
        <h1>Radio batton example</h1>
        <label>
          <input
            type="radio"
            name="gender"
            value="male"
            checked={this.state.gender === 1}
            onChange={this.handleChange}
          />{" "}
          Male
        </label>
        <br />
        <label>
          <input
            type="radio"
            name="gender"
            value="female"
            checked={this.state.gender === 0}
            onChange={this.handleChange}
          />{" "}
          Female
        </label>

        <p>Chosen gender: {GENDER_TYPE[this.state.gender]}</p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

从“React”导入React；
从“react dom”导入react dom；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
性别：“
};
this.handleChange=this.handleChange.bind（this）；
}
手变（活动）{
常量{name，value}=event.target；
this.setState（{[name]：value==“male”？1:0}）；
}
render（）{
常数性别类型={
1:“男性”，
0：“女性”
};
返回(
无线电营示例
{" "}
男性


{" "}
女性
所选性别：{gender_TYPE[this.state.gender]}

);
}
}
ReactDOM.render（
@HemadriDasari你是说在构造函数部分下吗？setGender正在调用和设置值，你可以通过在this.setState方法上编写回调函数来检查。在更改值后，你想要实现什么，你的要求是什么？试过你的代码，效果很好。试一下这个@HemadriDasari你是说在构造函数部分？setGender正在调用和设置值，您可以通过在this.setState方法上编写回调函数来检查。更改值后，您的要求是什么？尝试了代码，效果很好。请尝试此方法抱歉，我的问题是，类的内部或外部在哪里。my renderGender方法正在工作。它与setGender方法处于同一级别。看起来您现在更新了问题。最初我看到renderGender在Classis之外。我不认为renderGender函数需要绑定。抱歉，我的问题是，类的内部或外部在哪里。我的renderGender方法正在工作。它处于同一级别看起来你现在更新了这个问题，一开始我看到renderGender在classI之外，我不认为renderGender函数需要绑定