将输入状态从父组件传递到子组件答案

【问题标题】：Passing input state from parent to child component将输入状态从父组件传递到子组件
【发布时间】：2020-11-23 08:38:42
【问题描述】：

我想将 value 和 setValue 传递给 Right 组件。我做了一些事情，但它不起作用。我正在输入，但它会立即删除。我什至看不到我在 textinput 中输入的内容。这样做的正确方法是什么？

export const Vault = ({ navigation }: VaultStackNavigationProps<"Vault">) => {
  const [value, setValue] = useState("");

  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Right
          setText={setValue}
          value={value}
        />
      ),
    });
  }, [navigation]);
  return (
   //component style
  );
};

const Right = ({ value, setText }) => {
  const [focus, setFocus] = useState(false);
  const { width } = useWindowDimensions();
  const onSearch = () => {
    setFocus(true);
  };
  const onClose = () => {
    setFocus(false);
  };

  return (
    <>
      <Animated.Viewstyle={{flexDirection: "row",justifyContent: "center",alignItems: "center",width:width - 40,
        }}
      >
       {focus && (
          <TextInput
            value={value}
            onChangeText={(text) => setText(text)}
            placeholder="Type here"
          />
        )}
        {value.length > 0 && (
          <TouchableOpacity style={{ width: width / 9 }} onPress={onClear}>
            <AntDesign name="close" size={24} color="white" />
          </TouchableOpacity>
        )}
      </Animated.View>
      {!focus && (
        <TouchableOpacity onPress={onSearch} style={{ width: width / 9 }}>
          <AntDesign name="search1" size={24} color="#64646E" />
        </TouchableOpacity>
      )}
    </>
  );
};

【问题讨论】：

标签： react-native state react-props

【解决方案1】：

如果不添加更多内容，您的示例代码将无法运行。供将来参考，请参阅how to make a minimum, reproducible example。

不管怎样，下面是一个将 state 值和 setter 方法传递给子组件的例子，我已经测试过了：

TestComponent.js：

import React, {useState} from "react";
import {TextInput, View, Text, SafeAreaView, StyleSheet} from "react-native";

const TestComponent = props => {
    const [value, setValue] = useState("");

    return (
        <SafeAreaView style={styles.safeAreaView}>
            <View style={styles.parent}>
                <ChildComponent value={value} setValue={setValue}/>
            </View>
        </SafeAreaView>

    );
};

const ChildComponent = props => {

    const textChangeHandler = (text) => {
        props.setValue(text);
    };

    return (
        <View style={styles.child}>
            <Text>Input Some Text:</Text>
            <TextInput
                style={styles.input}
                value={props.value}
                onChangeText={textChangeHandler}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    safeAreaView: {
        flex: 1,
    },
    parent: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
    },
    child: {
        flexDirection: "row",
        marginHorizontal: 25,
        justifyContent: "center",
        alignItems: "center",
    },
    input:{
        flex: 1,
        marginHorizontal: 10,
        borderWidth: 1,
        borderColor: "black",
    }
});

export default TestComponent;

这里是 App.js 文件：

import React from 'react';
import {StyleSheet, SafeAreaView} from 'react-native';

import TestComponent from "./TestComponent";

export default function App() {

    return (
        <SafeAreaView style={styles.safeAreaView}>
            <TestComponent />
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    safeAreaView: {
        flex: 1,
    }
});

【讨论】：