如何从子组件获取值？

Question

我有一个要导入页面的组件：

function CodeVerify(props) {
  const [value, setValue] = useState('');
  const ref = 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={ref}
        {...propsCV}
        value={value}
        onChangeText={setValue}
        cellCount={CELL_COUNT}
        rootStyle={styles.codeFiledRoot}
        keyboardType="number-pad"
        textContentType="oneTimeCode"
        renderCell={({index, symbol, isFocused}) => (
          <View
            // Make sure that you pass onLayout={getCellOnLayoutHandler(index)} prop to root component of "Cell"
            onLayout={getCellOnLayoutHandler(index)}
            key={index}
            style={[styles.cellRoot, isFocused && styles.focusCell]}>
            <Text style={styles.cellText}>
              {symbol || (isFocused ? <Cursor /> : null)}
            </Text>
          </View>
        )}
      />
    </SafeAreaView>
  );

在页面上，我呈现组件

如何从CodeVerify组件获取组件的值？




Answer 1

匿名用户

您可以将您的状态从子提升到父，然后传递该数据以下是示例：

父组件

import React, {useEffect, useState} from 'react';
import Child from "./Child";

function CParent(props) {

    const [value, setValue] = useState(false);

    function setOpeningValue(value) {
        console.log('From Child to Parent:' + value);
        setValue(value);
    }
    return (
        <div>
            <Child setOpeningValue={setOpeningValue}/>
        </div>
    );
}
export default CParent;

在这里，我们使用像setOpenValue={setOpeningValue}这样的道具传递setOpeningValue。从子组件中，我们调用setOpeningValue，其中参数中有一个值，这样我们就可以将该参数接收到父组件中。

子组件

import React, {useEffect, useState} from 'react';

// Child to Parent communication
function Child(props) {
    const {setOpeningValue} = props;
    const [value, setValue] = useState('');

    function clickHandler() {
        setOpeningValue(`changes is ${value}`);
    }

    function changeHandler(event) {
        setValue(event.target.value);
    }

    return (
        <div>
            <input onChange={changeHandler} />
            <button onClick={clickHandler}>pass data to parent</button>
        </div>
    );
}
export default Child;