React中实现多选框选中时显示对应Textarea（基于Reactstrap）

嘿，我懂你碰到的这个麻烦了——单个checked状态变量直接把所有多选框绑成了“连体婴”，点一个全选、所有textarea一起显示，完全不是你要的独立控制效果。别担心，咱们只需要把状态改成每个选项单独管理，就能轻松解决这个问题，具体做法如下：

不再用单个布尔值存所有多选框的状态，而是用一个对象（或数组），每个键对应一个多选框的唯一标识，值对应它的选中状态（true/false）。这样每个多选框的状态都是独立的，不会互相干扰。

如果是十几个选项，推荐用动态渲染的方式，避免重复写冗余代码：

import React, { useState } from 'react';
import { Form, CustomCheckbox, FormTextarea } from 'reactstrap';

const IndependentCheckboxForm = () => {
  // 1. 定义所有选项的基础数据（可以根据需求扩展到十几个）
  const checkboxOptions = [
    { id: 'reason1', checkboxLabel: '原因1：信息填写错误', textareaLabel: '请补充错误详情' },
    { id: 'reason2', checkboxLabel: '原因2：流程不符合要求', textareaLabel: '请说明具体问题' },
    { id: 'reason3', checkboxLabel: '原因3：其他特殊情况', textareaLabel: '请详细描述' },
    // 继续添加更多选项...
  ];

  // 2. 初始化状态：用对象存储每个选项的选中状态，默认都是未选中
  const initialCheckedStates = checkboxOptions.reduce((acc, option) => {
    acc[option.id] = false;
    return acc;
  }, {});
  const [checkedStates, setCheckedStates] = useState(initialCheckedStates);

  // 3. 通用状态切换函数：只修改当前点击的多选框对应的状态
  const handleCheckboxToggle = (optionId) => {
    setCheckedStates(prevState => ({
      ...prevState, // 保留其他选项的状态
      [optionId]: !prevState[optionId] // 切换当前选项的选中状态
    }));
  };

  return (
    <Form className="p-4">
      {/* 4. 动态渲染所有多选框和对应textarea */}
      {checkboxOptions.map(option => (
        <div key={option.id} className="mb-4">
          <CustomCheckbox
            id={option.id}
            label={option.checkboxLabel}
            checked={checkedStates[option.id]}
            onChange={() => handleCheckboxToggle(option.id)}
          />
          {/* 只有当前多选框被选中时，才显示对应的textarea */}
          {checkedStates[option.id] && (
            <FormTextarea
              id={`textarea-${option.id}`}
              label={option.textareaLabel}
              placeholder="请输入内容..."
              className="mt-2"
            />
          )}
        </div>
      ))}
    </Form>
  );
};

export default IndependentCheckboxForm;

• 状态独立性：每个多选框的状态都存在checkedStates对象的独立键中，修改一个不会影响其他选项。
• 动态渲染：通过map循环渲染所有选项，新增选项只需要在checkboxOptions数组里添加即可，不用重复写相同的组件代码，适合十几个选项的场景。
• 函数式更新：用prevState来获取上一次的状态，避免状态更新的竞态问题，保证状态修改的准确性。

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