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

Posted 2023-03-16

【中文标题】基于类的组件和 inChange 事件中的 function 关键字

【英文标题】：function keyword in class based component and inChange event

【发布时间】：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 方法中添加的任何日志。

谢谢。

【参考方案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 进行演示，您可能还想在此处阅读这两个问题：

correct-use-of-arrow-functions-in-react how-to-avoid-bind-or-inline-arrow-functions-inside-render-method

【参考方案2】：

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

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

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