Question

我有以下代码：

render() {

    return (

        <div className="main-block">
            <h1>Registration</h1>

            <form>
                <hr />
                <div className="account-type">
                    <input type="radio" onChange={this.handleUserType} value="1" checked={this.state.userType === "1"}/>
                    <label htmlFor="radioOne" className="radio">one</label>
                    <input type="radio" value="2" onChange={this.handleUserType} checked={this.state.userType === "2"}/>
                    <label htmlFor="radioTwo" className="radio">two</label>
                </div>
    ...
    ...

在handleUserType函数之外定义了render的地方：

handleUserType = event => {
    console.log("here")
    this.setState({
        userType: event.target.value
    });
};

它们渲染得非常好，但是每当我单击一个单选按钮时，都不会调用onChange函数（即我没有得到console.log("here")）

出什么问题了？

Answer 1

进行修改，以使只有JavaScript是“真理之源”，因此单击单选按钮将不会触发onChange事件，因为JS中没有任何变化。请改用onClick事件处理程序。

编辑：进一步调查后，您发布的onChange事件应该可以正常工作。

Answer 2

我在下面发布了您的请求的代码框。

https://codesandbox.io/s/react-example-kcdrs

我写了两个组件，一个作为类，另一个作为函数。两者都可以与onChange一起正常使用。我需要查看更多代码，以尝试帮助您找出问题所在。

Answer 3

您可以执行以下操作：

import React, { Component } from "react";
import ReactDOM from "react-dom";


    class App extends Component {
      constructor(props) {
        super(props);
        this.state = { userType: "1" };
      }

      handleUserType = e => {
        this.setState({ userType: e.target.value });
      };

      render() {
        const { userType } = this.state;
        return (
          <form>
            <div className="account-type">
              <input
                type="radio"
                onChange={this.handleUserType}
                value="1"
                checked={userType === "1"}
              />
              <label htmlFor="radioOne" className="radio">
                one
              </label>
              <input
                type="radio"
                value="2"
                onChange={this.handleUserType}
                checked={userType === "2"}
              />
              <label htmlFor="radioTwo" className="radio">
                two
              </label>
            </div>
          </form>
        );
      }
    }

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

https://codesandbox.io/s/festive-lamarr-ezk06

ReactJS-单选按钮onChange事件未触发

3 个答案: