如何在父组件中获取React Native子组件CodeVerify内部的value值

方案一：状态提升（React官方推荐写法） #

这种方案把输入状态提到父组件管理，符合单向数据流的设计原则，实现更简单也更易维护：

• 第一步：修改CodeVerify组件，移除内部的useState，改用props接收value和onValueChange回调
  修改后的组件代码：

function CodeVerify(props) {
  const { value, onValueChange } = props;
  const ref = useBlurOnFulfill({value, cellCount: CELL_COUNT});
  const [propsCV, getCellOnLayoutHandler] = useClearByFocusCell({
    value,
    setValue: onValueChange,
  });

  return (
    <SafeAreaView style={styles.root}>
      <Text style={styles.title}>
        Enter the code sent to your number 
      </Text>
      <CodeField
        ref={ref}
        {...propsCV}
        value={value}
        onChangeText={onValueChange}
        cellCount={CELL_COUNT}
        rootStyle={styles.codeFiledRoot}
        keyboardType="number-pad"
        textContentType="oneTimeCode"
        renderCell={({index, symbol, isFocused}) => (
          <View
            onLayout={getCellOnLayoutHandler(index)}
            key={index}
            style={[styles.cellRoot, isFocused && styles.focusCell]}>
            <Text style={styles.cellText}>
              {symbol || (isFocused ? <Cursor /> : null)}
            </Text>
          </View>
        )}
      />
    </SafeAreaView>
  );
}

• 第二步：父组件自己维护code状态，把对应属性传给CodeVerify即可直接拿到实时输入值
  父组件示例代码：

function ParentPage() {
  const [code, setCode] = useState('');
  // 可以直接使用code变量，就是验证码的输入值
  console.log('当前输入的验证码：', code);

  return <CodeVerify value={code} onValueChange={setCode} />
}

方案二：通过ref暴露内部值（适合不想改动状态管理的场景） #

如果不想把状态提到父组件，可以用useImperativeHandle + forwardRef把内部value暴露给父组件调用：

• 第一步：改造CodeVerify组件，包裹forwardRef并暴露对应属性
  修改后的组件代码：

import { forwardRef, useImperativeHandle } from 'react';
const CodeVerify = forwardRef((props, ref) => {
  const [value, setValue] = useState('');
  // 把内部状态暴露给父组件的ref
  useImperativeHandle(ref, () => ({
    getCurrentCode: () => value,
    currentCode: value
  }));

  const blurRef = useBlurOnFulfill({value, cellCount: CELL_COUNT});
  const [propsCV, getCellOnLayoutHandler] = useClearByFocusCell({
    value,
    setValue,
  });

  return (
    <SafeAreaView style={styles.root}>
      <Text style={styles.title}>
        Enter the code sent to your number 
      </Text>
      <CodeField
        ref={blurRef}
        {...propsCV}
        value={value}
        onChangeText={setValue}
        cellCount={CELL_COUNT}
        rootStyle={styles.codeFiledRoot}
        keyboardType="number-pad"
        textContentType="oneTimeCode"
        renderCell={({index, symbol, isFocused}) => (
          <View
            onLayout={getCellOnLayoutHandler(index)}
            key={index}
            style={[styles.cellRoot, isFocused && styles.focusCell]}>
            <Text style={styles.cellText}>
              {symbol || (isFocused ? <Cursor /> : null)}
            </Text>
          </View>
        )}
      />
    </SafeAreaView>
  );
});

• 第二步：父组件创建ref，即可在需要的时候读取验证码值
  父组件示例代码：

function ParentPage() {
  const codeVerifyRef = useRef(null);

  const handleSubmit = () => {
    // 读取实时输入的验证码
    const code = codeVerifyRef.current?.currentCode;
    // 或者 const code = codeVerifyRef.current?.getCurrentCode();
    console.log('当前输入的验证码：', code);
  }

  return (
    <>
      <CodeVerify ref={codeVerifyRef} />
      <Button onPress={handleSubmit} title="提交验证码" />
    </>
  );
}

注意：第二种方案拿不到实时更新的状态通知，只适合在提交等特定时机读值的场景，如果需要实时监听值变化优先选方案一。

内容的提问来源于stack exchange，提问作者Тахир Мухаметов