如何实现带Conditional Rendering的React联系表单？现有代码运行异常求助

存在的问题列表 #

• 1. return自动分号插入问题：return后直接换行，JS会自动在return后插入分号，导致后面的JSX代码完全不执行，组件直接返回undefined渲染空白。
• 2. 条件渲染逻辑错误：原代码逻辑是年龄≥17才渲染整个表单，小于17直接返回字符串"null"，不符合需求。需求是姓名、年龄输入框始终显示，仅邮箱输入框根据年龄判断是否渲染。
• 3. 缺少handleInputChange方法：所有输入框的onChange都绑定了该方法，但代码中没有实现，无法更新state，输入框会变成只读状态。
• 4. JSX标签嵌套错误：标签闭合顺序混乱，<form>包裹在外层<div>内，原代码先闭合<div>再闭合<form>，还多了一个多余的</div>标签，属于语法错误。
• 5. age类型未做转换：input输入的age默认是字符串类型，比较时最好显式转为数字，避免出现隐式类型转换的异常。

修正后完整代码 #

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

class ContactForm extends Component {
  state = {
    firstName: '',
    age: '',
    email: '',
  }

  // 新增输入框内容变更处理方法
  handleInputChange = (e) => {
    const { name, value } = e.target;
    this.setState({
      [name]: value
    });
  }

  render() {
    const { firstName, age, email } = this.state;
    // 显式转换为数字做年龄判断
    const showEmailInput = Number(age) >= 17;

    // return后的JSX用括号包裹，避免自动分号插入问题
    return (
      <div>
        <form 
          className='form' 
          onSubmit={(event) => {
            event.preventDefault();
            // 兼容onSubmit属性未传的场景，避免报错
            this.props.onSubmit?.(this.state);
          }}
        >
          <input 
            onChange={this.handleInputChange} 
            value={firstName} 
            name='firstName' 
            placeholder="请输入姓名"
          />
          <input 
            onChange={this.handleInputChange} 
            value={age} 
            name='age' 
            type="number"
            placeholder="请输入年龄"
          />
          {/* 仅年龄≥17时渲染邮箱输入框 */}
          {showEmailInput && (
            <input 
              onChange={this.handleInputChange} 
              value={email} 
              name='email' 
              placeholder="请输入邮箱"
            />
          )}
          <button className='contact-form__submit'>提交</button>
        </form>
      </div>
    )
  }
}

document.body.innerHTML = "<div id='root'></div>";
const rootElement = document.getElementById("root");
ReactDOM.render(<ContactForm />, rootElement);

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