基于类的组件和 inChange 事件中的 function 关键字答案

【问题标题】：function keyword in class based component and inChange event基于类的组件和 inChange 事件中的 function 关键字
【发布时间】：2021-11-17 09:43:05
【问题描述】：

谁能帮我理解下面的代码sn-p是否有问题：

import React, { Component } from "react";


class AddContactForm extends Component {

    constructor() {
        super();
        this.state = {
            name: "",
            email: "",
            number: ""
        }
    }

    handleOnChange(event) {
        console.log("Hi");
        console.log(event.target.id);
        console.log(event.target.value);
    }

    render() {
        return (
            <React.Fragment>
                <div className="mx-auto">
                    <div class="mb-3 row">
                        <label for="username" class="col-sm-2 col-form-label">Name</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="username" onChange={this.handleOnChange.bind(this)}/>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="mobileNumber" class="col-sm-2 col-form-label">Mobile Number</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="mobileNumber" onChange={this.handleOnChange}/>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="emailId" class="col-sm-2 col-form-label">Email</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" id="emailId" onChange={this.handleOnChange}/>
                        </div>
                    </div>
                    <button className="btn btn-primary w-25">Add</button>
                </div>
            </React.Fragment>
        )
    }
}

export default AddContactForm;

我面临以下问题：

1 - 无法将函数关键字与handleOnChange 方法一起使用

2 - 我的输入都没有触发onChange 事件。我无法在控制台中获取HandleOnChange 方法中添加的任何日志。

谢谢。

【问题讨论】：

标签： reactjs jsx react-class-based-component

【解决方案1】：

除了@Muhammad 指出的错误之外，您的代码中几乎没有错误，为了避免 jsx 的冲突，更改了一些属性名称：

class 变成了className
for 变成了htmlFor 与标签元素类似的问题here。

另外值得注意的是，使用箭头函数是favored而不是使用bind，所以你通常将函数创建为箭头函数。

handleOnChange = (event) => {
    console.log("Hi");
    console.log(event.target.id);
    console.log(event.target.value);  
};

并让onChange 调用它。

onChange={this.handleOnChange}

您可以参考此codesandbox 进行演示，您可能还想在此处阅读这两个问题：

【讨论】：

【解决方案2】：

在你的构造函数中绑定所有的方法。

  constructor() {
     super();
     this.state = {
         name: "",
         email: "",
         number: ""
     }
      this.handleOnChange: this.handleOnChange.bind(this)
   }

在你的输入中使用这样的 <input onClick={this.handleOnChange} />

【讨论】：