ReactJS条件渲染输入框：根据下拉选择显示对应输入框

嘿，作为React新手，你已经摸透了基本的state用法，现在只需要把按钮触发的state更新改成下拉框选择触发就可以搞定需求啦！下面是针对你需求的完整实现：

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

class UserTypeForm extends React.Component {
  constructor(props) {
    super(props);
    // 初始化state：存储选中的用户类型，默认设为"company"
    this.state = {
      selectedType: "company",
      companyName: "", // 可选：存储公司输入框的内容
      individualName: "" // 可选：存储个人输入框的内容
    };
  }

  // 处理下拉框选择变化的函数
  handleTypeChange = (e) => {
    // 通过e.target.value拿到选中的选项值，更新state
    this.setState({ selectedType: e.target.value });
  }

  // 处理输入框内容变化的函数（可选，若需要收集输入值则保留）
  handleInputChange = (e) => {
    const { name, value } = e.target;
    this.setState({ [name]: value });
  }

  render() {
    const { selectedType, companyName, individualName } = this.state;

    return (
      <div>
        <h3>选择用户类型</h3>
        {/* 下拉选择框：绑定value和onChange事件 */}
        <select 
          value={selectedType} 
          onChange={this.handleTypeChange}
        >
          <option value="company">Company</option>
          <option value="individual">Individual</option>
        </select>

        {/* 根据选中类型条件渲染对应输入框 */}
        <div style={{ marginTop: '10px' }}>
          {selectedType === "company" && (
            <input 
              type="text" 
              name="companyName" 
              value={companyName}
              onChange={this.handleInputChange}
              placeholder="请输入公司名称"
            />
          )}
          {selectedType === "individual" && (
            <input 
              type="text" 
              name="individualName" 
              value={individualName}
              onChange={this.handleInputChange}
              placeholder="请输入个人姓名"
            />
          )}
        </div>

        {/* 可选：展示当前选中状态和输入内容 */}
        <div style={{ marginTop: '20px' }}>
          <p>你选择了：{selectedType === "company" ? "公司" : "个人"}</p>
          {selectedType === "company" && <p>公司名称：{companyName}</p>}
          {selectedType === "individual" && <p>个人姓名：{individualName}</p>}
        </div>
      </div>
    );
  }
}

ReactDOM.render(<UserTypeForm />, document.getElementById('root'));

核心逻辑说明： #

• state管理：新增selectedType字段跟踪下拉框的选中值，同时可选添加输入框的存储字段，方便后续收集表单数据。
• 下拉框事件绑定：给<select>加上onChange={this.handleTypeChange}，每次选择变化时，通过e.target.value获取选中值并更新state。
• 条件渲染：使用&&逻辑运算符实现条件渲染——当selectedType匹配对应值时，才渲染对应的输入框，这是React中简洁常用的条件渲染方式。
• 受控输入框：如果需要收集用户输入内容，给input绑定value和onChange，确保输入值与state实时同步，实现受控组件。

对比你之前的按钮控制代码，核心区别就是把按钮的onClick触发换成了下拉框的onChange触发，再根据选中的类型判断渲染元素，而不是用单一的isActive布尔值~

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