如何從子組件獲取值？-有解無憂

我有一個要匯入頁面的組件：

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 />

如何從 CodeVerify 組件獲取組件的值？

uj5u.com熱心網友回復：

您可以lifted up將狀態從childtoparent傳遞，然后傳遞該資料這是示例：

父組件

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;

在這里，我們setOpeningValue使用像setOpeningValue={setOpeningValue}. 我們從子組件呼叫setOpeningValue一個值 inparameter以便我們可以將其接收parameter到parent component.

子組件

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;

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/365450.html

標籤：反应反应原生

上一篇：使用fetch()將原生API請求反應為getmatiAPI在郵遞員中回應良好，但在App中無法正常作業并出現400錯誤

下一篇：我想在30秒后重新啟動圓形進度條