React Native表单单选按钮选中值存储与提交方案问询

要把所有单选按钮和输入框的值统一收集，核心思路是把表单状态提升到父组件FeedBack中管理，子组件只负责渲染和传递用户选择/输入的值，这样父组件就能拿到所有数据，提交时统一发给后端。

步骤1：修改父组件FeedBack.tsx #

添加状态存储所有表单数据，给子组件传递回调函数来更新状态：

import { useState } from 'react';

const FeedBack = () => {
  const submitIcon = <Icon name="poll" size={24} color="#ffffff" />;
  
  // 初始化表单数据，键对应每个表单项的标识，值是默认选中/输入内容
  const [feedbackData, setFeedbackData] = useState({
    feedbackText: '',
    loveGardening: 'yes', // 对应第一个单选的默认值
    plantCount: '0-10'    // 对应第二个单选的默认值
  });

  // 处理文本输入变化
  const handleTextInputChange = (text: string) => {
    setFeedbackData(prev => ({ ...prev, feedbackText: text }));
  };

  // 处理单选按钮变化，通过字段名区分不同的单选组
  const handleRadioChange = (fieldName: string, value: string) => {
    setFeedbackData(prev => ({ ...prev, [fieldName]: value }));
  };

  // 提交表单的函数
  const handleSubmit = () => {
    // 这里把feedbackData发送到后端，示例用fetch
    console.log('提交的数据：', feedbackData);
    // fetch('/api/submit-feedback', {
    //   method: 'POST',
    //   body: JSON.stringify(feedbackData),
    //   headers: { 'Content-Type': 'application/json' }
    // });
  };

  return (
    <FeedBackMainContainer>
      <MainTextContainer>
        <MainText>we care about your valuable feedback ..!!</MainText> 
      </MainTextContainer>
      <CustomTextInput 
        value={feedbackData.feedbackText}
        onChangeText={handleTextInputChange}
      /> 
      <CustomCheckBox
        title={"do you love gardening ?"}
        options={["yes", "no"]}
        value={feedbackData.loveGardening}
        onValueChange={(val) => handleRadioChange('loveGardening', val)}
      />
      <CustomCheckBox
        title={"how many plants do you have ?"}
        options={["0-10", "10-20", "more than 20"]}
        value={feedbackData.plantCount}
        onValueChange={(val) => handleRadioChange('plantCount', val)}
      />
      <CustomButton
        title={"Submit"}
        icon={submitIcon}
        submit={true}
        onPress={handleSubmit} // 绑定提交触发函数
        toPage={"Submit"}
      />
    </FeedBackMainContainer>
  );
};

步骤2：修改子组件CustomCheckBox.tsx #

移除组件内部的state，改为接收父组件传递的value和onValueChange props，变成受控组件：

// 定义Props类型，新增value和onValueChange
type Props = {
  title: string;
  options: string[];
  value: string;
  onValueChange: (value: string) => void;
};

const CustomCheckBox = ({ title, options, value, onValueChange }: Props) => {
  return (
    <CheckBoxMainContainer>
      <RadioQuestionTitle>{title}</RadioQuestionTitle>
      <RadioButton.Group
        onValueChange={onValueChange} // 直接用父组件传的回调
        value={value} // 用父组件管理的状态值
      >
        {options.map((item, index) => {
          return (
            <RadioOptinsContainer key={index}>
              <RadioButton color="#1f4623" value={item} />
              <TextStyle>{item}</TextStyle>
            </RadioOptinsContainer>
          );
        })}
      </RadioButton.Group>
    </CheckBoxMainContainer>
  );
};

步骤3：补充CustomTextInput受控逻辑（如果未实现） #

确保文本输入框也是受控组件，绑定父组件传递的值和回调：

type TextInputProps = {
  value: string;
  onChangeText: (text: string) => void;
};

const CustomTextInput = ({ value, onChangeText }: TextInputProps) => {
  return (
    <StyledTextInput
      value={value}
      onChangeText={onChangeText}
      placeholder="Enter your feedback..."
      // 其他样式/属性
    />
  );
};

关键说明 #

• 所有表单状态都在父组件FeedBack的feedbackData中统一管理，子组件只负责渲染和传递用户操作。
• 通过handleRadioChange函数，用字段名区分不同单选组，精准更新对应状态。
• 提交时直接使用feedbackData对象，它包含了文本输入和所有单选按钮的选中值，可直接发给后端。

内容的提问来源于stack exchange，提问作者Shouvik Das Gupta