reactjs - 如何在不使用 React 中的父子关系的情况下将数据发送到另一个组件

Question

我需要将数据从“SearchingData”组件发送到“Search”组件。SearchingData 是 searchData 的子对象，这里我需要将“datacame”变量数据发送到搜索组件，任何人都可以帮我解决这个问题，在此先感谢。我需要将“datacame”变量数据访问到下一个搜索组件，所以现在我如何发送该数据搜索组件，谁能帮我解决这个问题，在此先感谢...

import React, { ChangeEvent, useState } from "react";

type searchData = {
  handleSearch: (e: ChangeEvent<HTMLInputElement>) => void;
  seardhingDTata: any;
  seardhDTata: string;
};

const SearchingData: React.FC<searchData> = ({
  handleSearch,
  seardhingDTata,
  seardhDTata,
}) => {
  const UpdateData = (e: ChangeEvent<HTMLInputElement>) => {
    handleSearch(e);
  };

  const [datacame, setdatacame] = useState(seardhDTata);
  const serachData = () => {
    let defaultData = seardhingDTata;
    const filterdserachData = seardhDTata
      ? defaultData.filter((use: any) =>
          use.UserName.toLowerCase().startsWith(seardhDTata)
        )
      : defaultData;
    //console.log(filterdserachData);
    setdatacame(filterdserachData);
  };

  return (
    <React.Fragment>
      <div>
        <input type="text" onChange={UpdateData} />
        <button className="btn btn-blue btn-sm" onClick={serachData}>
          Serach
        </button>
      </div>
    </React.Fragment>
  );
};

export default SearchingData;

import React, { ChangeEvent } from "react";
import { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import SearchingData from "./SearchingData";

const Search: React.FC = () => {
  let dispatch = useDispatch();
  //Read the Data from Store
  let readingStateData: searchReducsers.ISearch = useSelector(
    (state: { searchingData: searchReducsers.ISearch }) => {
      return state.searchingData;
    }
  );
  // Update the Data
  useEffect(() => {
    //console.log(readingStateData.search)
    dispatch(searchActions.fetchUser());
  }, []);

  const [seardhDTata, setseardhDTata] = useState("");
  // const [searchText, setsearchText] = useState('');

  const handlesearching = (e: ChangeEvent<HTMLInputElement>) => {
    //console.log(e.target.value);
    setseardhDTata(e.target.value);
  };

  const defaultData = readingStateData.search;

  return (
    <React.Fragment>
      <div className="container mt-3">
        <div className="row">
          <div className="col-md-3">
            <div className="card"></div>
          </div>
        </div>
      </div>
      <SearchingData
        handleSearch={handlesearching}
        seardhingDTata={defaultData}
        seardhDTata={seardhDTata}
      />
      <table className="table table-hover text-center table-primary">
        <thead className="text-black">
          <tr>
            <th>UserName</th>
            <th>Phone</th>
            <th>Email</th>
            <th>Gender</th>
          </tr>
        </thead>
        <tbody>
          <React.Fragment>
            {defaultData.map((user) => {
              return (
                <tr>
                  <td>{user.UserName}</td>
                  <td>{user.PhoneNumber}</td>
                  <td>{user.email}</td>
                  <td>{user.gender}</td>
                </tr>
              );
            })}
          </React.Fragment>
        </tbody>
      </table>
    </React.Fragment>
  );
};

export default Search;

标签： reactjstypescriptredux

Answer 1

组件中有一个状态，Search当我们单击SearchingData. 现在使用这个状态来过滤数据。

搜索数据组件

import React, { ChangeEvent, useState } from "react";

type searchData = {
  setSearchText: (searchText: string) => void;
};

const SearchingData: React.FC<searchData> = ({
  handleSearch,
}) => {
  const [ searchInput, setSearchInput ] = useState('')

  const serachData = () => {
    setSearchText(searchInput);
  };

  return (
    <React.Fragment>
      <div>
        <input type="text" value={searchInput} onChange={(e) => setSearchInput(e.target.value) } />
        <button className="btn btn-blue btn-sm" onClick={serachData}>
          Serach
        </button>
      </div>
    </React.Fragment>
  );
};

export default SearchingData;

搜索组件

import React, { ChangeEvent } from "react";
import { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import SearchingData from "./SearchingData";

const Search: React.FC = () => {
  let dispatch = useDispatch();
  const [searchQuery, setSearchQuery] = useState("");
  //Read the Data from Store
  let readingStateData: searchReducsers.ISearch = useSelector(
    (state: { searchingData: searchReducsers.ISearch }) => {
      return state.searchingData;
    }
  );
  // Update the Data
  useEffect(() => {
    //console.log(readingStateData.search)
    dispatch(searchActions.fetchUser());
  }, []);

  const handlesearching = (searchText: string) => {
    //console.log(e.target.value);
    setSearchQuery(searchText);
  };

  const dataToDisplay = searchQuery.trim().length > 0 ? readingStateData.search.filter((use: any) =>
  use.UserName.toLowerCase().startsWith(seardhDTata)
) : readingStateData.search;

  return (
    <React.Fragment>
      <div className="container mt-3">
        <div className="row">
          <div className="col-md-3">
            <div className="card"></div>
          </div>
        </div>
      </div>
      <SearchingData
        setSearchText={handlesearching}
      />
      <table className="table table-hover text-center table-primary">
        <thead className="text-black">
          <tr>
            <th>UserName</th>
            <th>Phone</th>
            <th>Email</th>
            <th>Gender</th>
          </tr>
        </thead>
        <tbody>
          <React.Fragment>
            {dataToDisplay.map((user) => {
              return (
                <tr>
                  <td>{user.UserName}</td>
                  <td>{user.PhoneNumber}</td>
                  <td>{user.email}</td>
                  <td>{user.gender}</td>
                </tr>
              );
            })}
          </React.Fragment>
        </tbody>
      </table>
    </React.Fragment>
  );
};

export default Search;