Question

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

当用户单击单选按钮时，我要设置我的状态值。我尝试了Web中提到的所有解决方案，但无法设置性别值。

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

当用户单击单选按钮时，不会调用我的setGender方法。此代码中我的错误是什么？

Answer 1

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

例如：更改

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

收件人

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

Answer 2

如果要将性别的状态变量保存为整数，则可以处理在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"));

因此，单选按钮标记的值仍然为“ male”和“ female”，但在handleChange（）函数中转换为整数，并将其保存为整数。

实时示例：

ReactJS-单选按钮“ onClick”事件未触发

2 个答案: