本文介绍了如何在Reaction中将道具传递给另一个组件？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

因此，我在第一列中有一个带有搜索筛选器onPressEnter的表组件，并且我希望我的搜索栏组件基本上执行相同的操作。

在我的Table.js中，我要将confirm()传递给searchbar.js

const columns = [
    {
      key: "1",
      title: "Title",
      dataIndex: "title",
      render: (text) => {text},
      sorter: (record1, record2) => record1.title.localeCompare(record2.title),
      filterDropdown: ({ setselectedKeys, selectedKeys, confirm }) => {
        return (
           {
              setSelectedKeys(e.target.value ? [e.target.value] : []);
            }}
            onPressEnter={() => {
              confirm();
            }}
            onBlur={() => {
              confirm();
            }}
          >
        );
      },
      filterIcon: () => {
        return ;
      },
      onFilter: (value, record) => {
        return record.title.toLowerCase().includes(value.toLowerCase());
      }
    },]

这是我的Searchbar.js

function Searchbar() {
  return (
    

      

        
        Search
      
    
  );
}

export default Searchbar;

我还制作了一个codesandboxproject，以便更好地可视化我的问题。所以我有一个主搜索栏组件，我希望它与我的表组件中的搜索筛选器做同样的事情。这有可能吗？如果是这样，那么解决这一问题的最佳方式是什么？我很感激你们的帮助。谢谢！

推荐答案

我建议使用重构。将数据和搜索逻辑向上移动到父组件，并将其作为道具传递给子组件，如下所示：

import React, { useState, useEffect } from "react";
import Searchbar from "../components/Searchbar";
import MyTable from "../components/Table";

export default function HomeAfterSearch() {
  const [data, setData] = useState([]);
  const [searchText, setSearchText] = useState("");
  const [loading, setLoading] = useState(true);

  const getData = () => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((response) => response.json())
      .then((data) => {
        setData(data);
      })
      .catch((err) => {
        console.log(err);
      })
      .finally(() => {
        setLoading(false);
      });
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    

      
       {
          if (!searchText) return true;
          else if (
            JSON.stringify(item)
              .toLowerCase()
              .includes(searchText.toLowerCase())
          )
            return true;
          else return false;
        })}
      />
    
  );
}

那么在MyTable中，您可以这样声明它：

function MyTable(props) {
const { data, loading } = props;
.....

和SearchBar如下：

function Searchbar(props) {
const { searchText, setSearchText } = props;

这篇关于如何在Reaction中将道具传递给另一个组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持吉威生活！

[英文标题]How to pass props to another component in React?

声明：本媒体部分图片、文章来源于网络，版权归原作者所有，如有侵权，请联系QQ:330946442删除。