React Native+TypeScript实现勾选框自动填充输入框功能求助

以下是符合需求的完整实现代码，包含状态管理、组件联动逻辑：

import { useState } from 'react';
import { CheckBox, TextInput, View, Text, StyleSheet } from 'react-native';

const NameVerificationComponent = () => {
  // 勾选状态
  const [checked, setChecked] = useState(false);
  // 输入框值存储
  const [inputName, setInputName] = useState('');
  // 预设用户姓名（实际项目中可从props/全局状态获取）
  const user_name = '张三';

  const handleCheckboxToggle = () => {
    const newCheckedState = !checked;
    setChecked(newCheckedState);
    
    // 勾选时自动填充用户姓名到输入框
    if (newCheckedState) {
      setInputName(user_name);
    }
  };

  const handleNameChange = (text: string) => {
    // 未勾选时允许修改输入框内容
    if (!checked) {
      setInputName(text);
    }
  };

  return (
    <View style={styles.container}>
      {/* 勾选框与提示文本 */}
      <View style={styles.checkboxRow}>
        <CheckBox
          checked={checked}
          onPress={handleCheckboxToggle}
          checkedIcon='dot-circle-o'
          uncheckedIcon='circle-o'
          checkedColor='blue'
          uncheckedColor='blue'
        />
        <Text style={styles.checkboxLabel}>确认姓名与信用卡姓名一致</Text>
      </View>

      {/* 姓名输入框 */}
      <TextInput
        placeholder='姓名'
        value={checked ? user_name : inputName}
        onChangeText={handleNameChange}
        editable={!checked}
        style={styles.input}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  checkboxRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 16,
  },
  checkboxLabel: {
    marginLeft: 8,
    fontSize: 14,
  },
  input: {
    borderWidth: 1,
    borderColor: '#e0e0e0',
    borderRadius: 4,
    paddingHorizontal: 12,
    paddingVertical: 8,
    fontSize: 14,
  },
});

export default NameVerificationComponent;

关键逻辑说明 #

• 状态联动：勾选框切换时，若为勾选状态，自动将预设的user_name填充到输入框；取消勾选后，输入框恢复可编辑状态，允许手动输入。
• 输入控制：勾选状态下输入框被禁用（editable={!checked}），确保姓名与预设值一致；未勾选时可自由修改输入内容。
• 代码修正：原框架中CheckBox的checked属性错误绑定为setChecked，已修正为绑定checked状态变量。

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