React类组件嵌套子组件无法调用外部onChange方法如何解决

• 类定义缺失关键字：父组件DealerRegistration的定义前缺少class关键字，属于基础语法错误
• 子组件作用域问题：RegistrationInput定义在父组件的render方法内部，子组件实例的this指向自身，无法访问父组件的onChange方法
• 事件绑定错误：初始写法onChange={onChange(e)}是直接执行函数而非绑定函数引用，且当前作用域不存在onChange变量，触发未定义报错
• 状态绑定错误：所有表单元素的value直接绑定this.state（整个状态对象），而非对应字段的具体值，会导致输入异常
• 提交函数逻辑问题：DealerRegisterApi内部引用的dealer_info未定义，也未正确获取父组件状态

import React from "react";

// 抽离子组件到父组件外部，通过props接收配置
class RegistrationInput extends React.Component {
  render() {
    return (
      <div>
        <input 
          className="block w-full px-1 py-1 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
          // 按字段类型指定合法type，特殊字段可通过props传type覆盖默认值
          type={this.props.type || "text"}
          id={this.props.id}
          aria-label={this.props.id}
          placeholder={this.props.placeholder}
          // 接收父组件传递的对应字段值
          value={this.props.value}
          // 调用父组件传递的监听方法
          onChange={this.props.onChange}
        />
      </div>
    )
  }
}

class DealerRegistration extends React.Component {
  state = {
    business_type: 'dealer',
    business_name: '',
    manager_fname: '',
    manager_lname: '',
    address_1: '',
    address_2: '',
    city: '',
    state: '',
    zip_code: '',
    manager_tn: '',
    manager_email: '',
    business_ein: '',
    user_name: '',
    password: '' 
  };

  onChange = (e) => {
    this.setState({
      [e.target.id]: e.target.value,
    });
  };

  // 提交逻辑抽为父组件实例方法
  handleSubmit = (e) => {
    // 阻止表单默认跳转提交行为
    e.preventDefault();
    // 直接取当前state作为提交数据
    const dealerInfo = this.state;
    console.log(dealerInfo);
    // 后续发起POST请求逻辑写在此处
  }

  render() {
    return (
      <section className="max-w-2xl p-2 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800" >
        <div className='p-6 justify-center items-center h-screen flex'>
          {/* 绑定表单提交事件，比绑定按钮点击更符合语义 */}
          <form onSubmit={this.handleSubmit} className="grid grid-cols-1 gap-1 mt-0 sm:grid-cols-1">
            <div>
              <label className="text-gray-700 dark:text-gray-200" htmlFor="business_type">business type: </label>
              <select 
                id="business_type" 
                // 绑定对应字段的具体值
                value={this.state.business_type} 
                onChange={this.onChange}
              >
                <option value="dealer">dealer</option>
                <option value="broker">broker</option>
                <option value="other">other</option>
              </select>
            </div>
            <br />
            <RegistrationInput 
              id="business_name"   
              placeholder="business name"
              value={this.state.business_name}
              onChange={this.onChange}
            />
            <RegistrationInput 
              id="manager_fname"   
              placeholder="manager first name"
              value={this.state.manager_fname}
              onChange={this.onChange}
            />
            <RegistrationInput 
              id="manager_lname"   
              placeholder="manager last name"
              value={this.state.manager_lname}
              onChange={this.onChange}
            />
            <RegistrationInput 
              id="address_1"       
              placeholder="address 1"
              value={this.state.address_1}
              onChange={this.onChange}
            />
            <RegistrationInput 
              id="address_2"       
              placeholder="address 2"
              value={this.state.address_2}
              onChange={this.onChange}
            />
            <RegistrationInput 
              id="city"            
              placeholder="city"
              value={this.state.city}
              onChange={this.onChange}
            />
            <RegistrationInput 
              id="state"           
              placeholder="state"
              value={this.state.state}
              onChange={this.onChange}
            />
            <RegistrationInput 
              id="zip_code"        
              placeholder="zip code"
              value={this.state.zip_code}
              onChange={this.onChange}
            />
            <RegistrationInput 
              id="manager_tn"      
              placeholder="manager phone number"
              type="tel"
              value={this.state.manager_tn}
              onChange={this.onChange}
            />
            <RegistrationInput 
              id="manager_email"   
              placeholder="manager email"
              type="email"
              value={this.state.manager_email}
              onChange={this.onChange}
            />
            <RegistrationInput 
              id="business_ein"    
              placeholder="business EIN"
              value={this.state.business_ein}
              onChange={this.onChange}
            />
            <br />
            <RegistrationInput 
              id="user_name"       
              placeholder="set user name"
              value={this.state.user_name}
              onChange={this.onChange}
            />
            <RegistrationInput 
              id="password"        
              placeholder="set password"
              type="password"
              value={this.state.password}
              onChange={this.onChange}
            />
            <br />
            <div>
              <button 
                type="submit"
                className="bg-purple-500 hover:bg-purple-700 text-white text-center py-2 px-4 rounded"
              >
                Register
              </button>
            </div>
          </form>
        </div>
      </section>
    )    
  }
};
  
export default DealerRegistration

• 通用组件抽离：将可复用的输入组件抽离到单独的文件中，全局复用，避免重复定义
• 简化事件绑定：类属性箭头函数声明的onChange已经绑定了父组件this，不需要额外套一层箭头函数，直接传onChange={this.onChange}即可
• 表单校验补充：根据业务需求添加字段校验逻辑，比如邮箱格式、手机号格式、密码长度校验等
• 第三方库选型：如果表单字段多、逻辑复杂，可以使用React Hook Form或者Formik等成熟表单库，减少样板代码，同时自带校验、错误提示等能力
• 状态管理优化：如果表单需要跨组件共享状态，可以结合useContext或者Redux等状态管理方案处理
• 语义化优化：所有表单标签添加对应的htmlFor属性和输入框的id关联，提升可访问性

内容的提问来源于stack exchange，提问作者avnav99