如何为可复用Radio组件管理React状态？满足表单数据存储需求

核心结论 #

状态必须在使用Radio按钮的父组件（比如你的BackgroundInfo）中定义，不能放在Radio组件内部。原因很简单：你需要统一收集整个表单的数据来存入sessionStorage，还要通过EmailJS发送——分散在子组件的状态会让数据收集变得混乱，同时还会破坏单选框的互斥逻辑。

具体修改步骤 #

1. 将RadioButton改造为受控组件

让它只负责渲染和传递事件，状态完全由父组件控制：

import styled from "styled-components"

function RadioButton({id, value, name, children, checked, onChange}) {
  return (
    <SelectionContainer>
      <Input 
        type='radio' 
        id={id} 
        value={value}  
        name={name}
        checked={checked}
        onChange={onChange}
      />
      <Label htmlFor={id}> {/* 修复原代码的htmlForfor拼写错误 */}
        {children}
      </Label>
    </SelectionContainer>
  )
}

const Input = styled.input`
  margin-right: 1rem;
  height: 1.1rem;
  width: 1.1rem;
  accent-color: grey;
`;

const Label = styled.label`
  color: white;
`;

const SelectionContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 80%;
  height: 5rem;
`;

export default RadioButton

2. 在父组件BackgroundInfo中集中管理状态

负责状态初始化、同步sessionStorage、处理单选框变更和提交逻辑：

import React, { useState, useEffect } from 'react'
import styled from 'styled-components'
import QuestionText from '../utils/Question';
import RadioButton from '../utils/RadioButton';

function BackgroundInfo() {
  // 从sessionStorage读取已保存的数据初始化状态，没有则用空值
  const [formData, setFormData] = useState(() => {
    const saved = sessionStorage.getItem('backgroundForm');
    return saved ? JSON.parse(saved) : {
      user_contentReady: '',
      user_companyRegistered: ''
    };
  });

  // 状态变化时自动同步到sessionStorage
  useEffect(() => {
    sessionStorage.setItem('backgroundForm', JSON.stringify(formData));
  }, [formData]);

  // 处理单选框选择变更
  const handleRadioChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  // EmailJS提交逻辑示例
  const handleSubmit = async () => {
    try {
      // 替换为你的EmailJS配置
      // await emailjs.send('你的服务ID', '你的模板ID', formData, '你的公钥');
      alert('提交成功');
    } catch (err) {
      console.error('提交失败:', err);
      alert('提交失败，请重试');
    }
  };

  return (
    <>
      <QuestionText>Do you have content ready for your site?</QuestionText>

      <RadioButton 
        id='yes-content' 
        value='Yes' 
        name='user_contentReady'
        checked={formData.user_contentReady === 'Yes'}
        onChange={handleRadioChange}
      >
        Yes, I have content ready.
      </RadioButton>
    
      <RadioButton 
        id='no-content' 
        value='No' 
        name='user_contentReady'
        checked={formData.user_contentReady === 'No'}
        onChange={handleRadioChange}
      >
        Not yet. I'm still working on it.
      </RadioButton>
  

      <QuestionText>Is your company legally registered?</QuestionText>

      <RadioButton 
        id='yes-registered' 
        value='Yes' 
        name='user_companyRegistered'
        checked={formData.user_companyRegistered === 'Yes'}
        onChange={handleRadioChange}
      >
        Yes.
      </RadioButton>
       
      <RadioButton 
        id='no-registered' 
        value='No' 
        name='user_companyRegistered'
        checked={formData.user_companyRegistered === 'No'}
        onChange={handleRadioChange}
      >
        No.
      </RadioButton>
     
      <RadioButton 
        id='not-yet' 
        value='Not yet' 
        name='user_companyRegistered'
        checked={formData.user_companyRegistered === 'Not yet'}
        onChange={handleRadioChange}
      >
        I'm in the process of registering it.
      </RadioButton>

      <SubmitButton onClick={handleSubmit}>提交表单</SubmitButton>
    </>
  )
}

const SubmitButton = styled.button`
  padding: 1rem 2rem;
  background-color: grey;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 2rem;
`;

export default BackgroundInfo

关键优势 #

• 保证同name单选框的互斥逻辑正常工作
• 统一的表单数据便于存入sessionStorage和发送EmailJS
• Radio组件保持纯渲染特性，可复用性更强，能适配更多场景

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