我想根据孩子的变化来更新父母反应原生

Question

我在更新父状态时遇到问题。实际上，我想在用户单击并选择他在运动中的表现水平后更改边缘的边缘。在选择了它的表现水平之后，所选的运动就会出现蓝色边框。 请问我需要帮助

Sport.js

import React, { useState, useEffect } from "react";
import {
  Modal,
  Alert,
  View,
  SafeAreaView,
  StyleSheet,
  Image,
  Text,
  TouchableOpacity,
  TouchableHighlight,
  ScrollView,
} from "react-native";

import AppLoading from "expo-app-loading";
import { useFonts } from "expo-font";
import * as Font from "expo-font";
import { useNavigation } from "@react-navigation/native";
import { ProgressBar, Colors } from "react-native-paper";
import { Ionicons } from "@expo/vector-icons";

import SportItem from "../../Components/SportItem";
import HeadCSearch from "../../Components/HeadCSearch";
import SearchTitle from "../../Components/SearchTitle";
import ModalPicker from "./ModalPicker";

export default function Sport() {
  const navigation = useNavigation();
  const [chooseData, setchooseData] = useState("0%");
  const [sports, setSports] = useState([
    {
      id: 1,
      urlIcon: "ios-football",
      name: "Football",
    },
    {
      id: 2,
      urlIcon: "hand-left-sharp",
      name: "Handball",
    },
    {
      id: 3,
      urlIcon: "ios-basketball",
      name: "Basketball",
    },
    {
      id: 4,
      urlIcon: "ios-car-sport",
      name: "Course",
    },
    {
      id: 5,
      urlIcon: "ios-baseball",
      name: "BaseBall",
    },
    {
      id: 6,
      urlIcon: "ios-tennisball",
      name: "Tennis",
    },
    /* {
      id: 7,
      urlIcon:
        "https://img.icons8.com/material-outlined/50/000000/basketball-net.png",
      name: "Basketball",
    }, */
  ]);

  const [toggle, setToggle] = useState(false);

  const [modalOpen, setModalOpen] = useState(false);
  const changeModalVisibility = (bool, id) => {
    setModalOpen(bool);
    sports.map((sport) => {
      if (id === sport.id) {
        const newState = !toggle;
        setToggle(newState);
      }
    });
  };
  const setData = (option) => {
    setchooseData(option);
  };

  const OPTIONS = ["Débutant", "Moyen", "Intermédiaire", "Expert"];

  let [fontsLoaded] = useFonts({
    "Gilroy-ExtraBold": require("../../assets/fonts/Gilroy-ExtraBold.otf"),
    "Gilroy-Light": require("../../assets/fonts/Gilroy-Light.otf"),
  });
  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    const borderColorValue = toggle ? "#49B5F2" : "white";
    return (
      <SafeAreaView style={styles.infoCont}>
        <ProgressBar
          style={{ marginTop: 35, borderRadius: 10 }}
          progress={1}
          color="#49B5F2"
        />
        <View style={styles.containWhite}>
          <SearchTitle
            styl={styles.whiteText}
            partenaire={"Choississez vos Sports Favoris"}
          />

          {/* <Modal visible={modalOpen} animationType="slide" transparent={true}>
                    <View style={{ flex: 1 }}>
                        <Text>Salut toi</Text>
                    </View>
                </Modal>  */}

          <Modal
            animationType="slide"
            transparent={true}
            visible={modalOpen}
            onRequestClose={() => {
              changeModalVisibility(false);
            }}
          >
            <ModalPicker
              sports={sports}
              OPTIONS={OPTIONS}
              setData={setData}
              changeModalVisibility={changeModalVisibility}
            />
          </Modal>

          <ScrollView
            contentContainerStyle={{
              backgroundColor: "#FFFFFF",
              flexWrap: "wrap",
              flexDirection: "row",
              /* borderColor: "yellow",
              borderWidth: 3,
              borderStyle: "solid", */
            }}
          >
            {sports.map((sport) => (
              <TouchableOpacity
                onPress={() => {
                  changeModalVisibility(true, sport.id);
                }}
                style={{
                  alignItems: "center",
                  display: "flex",
                  flexDirection: "row",
                  bottom: 10,
                  width: 150,
                  height: 50,
                  margin: 10,
                  backgroundColor: "#E4E9DD",
                  borderColor: borderColorValue,
                  borderWidth: 1,
                  borderRadius: 5,
                }}
                key={sport.id}
              >
                <View
                  style={{
                    alignItems: "center",
                    display: "flex",
                    flexDirection: "row",
                  }}
                >
                  <Ionicons
                    style={{ left: 8, top: 0 }}
                    name={sport.urlIcon}
                    size={20}
                    color="black"
                  />
                  <Text
                    style={{
                      fontFamily: "Gilroy-Light",
                      fontWeight: "bold",
                      fontSize: 16,
                      color: "#000000",
                      left: 15,
                    }}
                  >
                    {sport.name}
                  </Text>
                </View>
                <View style={styles.rate}>
                  <Text style={styles.rateText}>{chooseData}</Text>
                </View>
              </TouchableOpacity>
            ))}
          </ScrollView>
        </View>
        <TouchableOpacity
          onPress={() => navigation.navigate("Search")}
          style={styles.textinputcont}
        >
          <Text style={styles.textR}>Continuer</Text>
        </TouchableOpacity>
      </SafeAreaView>
    );
  }
}

ModalPicker.js

import React from "react";
import {
  View,
  Dimensions,
  TouchableOpacity,
  StyleSheet,
  TouchableHighlight,
  Text,
} from "react-native";
import { Fontisto } from "@expo/vector-icons";

import SearchTitle from "../../Components/SearchTitle";
export default function ModalPicker(props) {
  const WIDTH = Dimensions.get("window").width;
  const HEIGHT = Dimensions.get("window").height;

  const onPressItem = (option) => {
    props.changeModalVisibility(false);
    props.setData(option);
  };

  const option = props.OPTIONS.map((item, index) => {
    return (
      <TouchableOpacity
        style={styles.option}
        key={index}
        onPress={() => onPressItem(item)}
      >
        <Text
          style={[
            styles.textStyle,
            {
              width: 100,
              height: 40,
              backgroundColor: "#F7F7F7",
              borderRadius: 4,
              /* borderColor: "#49B5F2",
              borderWidth: 1,
              borderStyle: "solid", */
              color: "black",
              flexDirection: "row",
              margin: 2,
              top: 5,
              flex: 1,
              //top: 15,
              justifyContent: "center",
              alignItems: "center",
            },
          ]}
        >
          {item}
        </Text>
      </TouchableOpacity>
    );
  });

  return (
    <TouchableOpacity
      onPress={() => props.changeModalVisibility(false)}
      style={styles.container}
    >
      <View style={styles.centeredView}>
        <View
          style={[styles.modalView, { width: WIDTH - 85, height: HEIGHT / 3 }]}
        >
          <SearchTitle
            styl={[styles.whiteText, { top: -50 }]}
            partenaire={"Votre Niveau"}
          />
          <Text style={[styles.modalText, styles.centeredView, { top: -50 }]}>
            {option}
          </Text>

          <TouchableOpacity
            style={{
              ...styles.openButton,
              top: -30,
              left: 30,
            }}
            onPress={() => {
              console.log("remove border color");
            }}
          >
            <Text style={styles.textStyle}>Retirez des favoris {"     "} </Text>

            <Fontisto
              style={{ position: "absolute", right: 0, top: 10 }}
              name="minus-a"
              size={20}
              color="black"
            />
          </TouchableOpacity>
        </View>
      </View>
    </TouchableOpacity>
  );
}
[enter image description here][1]

Answer 1

您需要将样式动态插入到您的代码中。 并且有一个从子组件引发并在父组件中处理的事件，下面的代码可以帮助理解这一点

 class Parent extends React.Component {
        constructor(props, context) {
        super(props, context);
        this.state = {
            backgroundColor: 'yellow'
        }
    }

    onChangeStyle(backgroundColor) {
        this.setState({
            backgroundColor: backgroundColor
        })
    }

    render() {
        return <div style={{backgroundColor: this.state.backgroundColor, padding: 10}}>
            <Child onChangeParentStyle={this.onChangeStyle.bind(this)}/>
        </div>
    }
}

class Child extends React.Component {
    onClick() {
        this.props.onChangeParentStyle('red');
    }
    render() {
        return <span onClick={this.onClick.bind(this)} style={{background: 'white', cursor: 'pointer'}}>
            Change parent style
        </span>
    }
}

React.render(<Parent />, document.getElementById('container'));

Answer 2

需要从父传递到子回调函数，然后在子中调用。

const initState = {
  show: false
}
const Parent = (props) => {
  const [state, setState] = useState({ ...initState })
  const updateState = (childState) => {
      setState({
          show: !state.show
      });
  }
  return (
      <Child {...{ updateState }} />
  );
}

const Child = (props) => {
  const [state, setState] = useState({})
  const handleClick = () => {
      // You can also pass data to parent
      props.updateState(state);
  }
  return (
      <Button onClick={handleClick}>Click Me</Button>
  );
}