React Hooks新手求助：根据过滤器状态更新按钮文本值

Hey there! Let's fix that button text switching issue you're facing with your filter buttons. The key here is to use a single state variable to track the active filter, then bind that state to your bottom button's text. Here's a step-by-step solution:

Step 1: Add State to Track Active Filter #

First, initialize a state variable to keep track of which filter is currently selected. We'll start with "All" since that's the default value:

import { useState } from "react";

export default function Test() {
  const [activeFilter, setActiveFilter] = useState("All");
  // ... rest of your code
}

Step 2: Create a Click Handler for Filters #

Make a reusable function to update the active filter state whenever any button is clicked. This keeps your code clean and avoids repeating logic:

const handleFilterClick = (filterValue) => {
  setActiveFilter(filterValue);
  // Add your existing table filtering logic here (e.g., filter your data array based on filterValue)
};

Step 3: Update All Buttons to Use the Handler #

Attach this click handler to every filter button, passing the corresponding filter value:

<div className="top-filter-buttons">
  <button onClick={() => handleFilterClick("All")}>All</button>
  <button onClick={() => handleFilterClick("In Delivery")}>In Delivery</button>
  <button onClick={() => handleFilterClick("Delivered")}>Delivered</button>
  <button onClick={() => handleFilterClick("Order")}>Order</button>
  <button onClick={() => handleFilterClick("All")}>All</button>
</div>

Step 4: Bind the Bottom Button Text to State #

Finally, set your bottom button's text to the activeFilter state. Now whenever you click any filter button, this text will automatically update:

<div className="bottom-button-container">
  <button onClick={() => handleFilterClick("All")}>{activeFilter}</button>
</div>

Full Working Example #

Putting it all together, your component will look like this:

import { useState } from "react";

export default function Test() {
  const [activeFilter, setActiveFilter] = useState("All");
  // Assume you have table data here
  // const [tableData, setTableData] = useState(yourInitialData);

  const handleFilterClick = (filterValue) => {
    setActiveFilter(filterValue);
    // Example filtering logic (adjust based on your data structure)
    // const filteredData = yourInitialData.filter(item => 
    //   filterValue === "All" ? true : item.status === filterValue
    // );
    // setTableData(filteredData);
  };

  return (
    <div>
      {/* Top Filter Buttons */}
      <div style={{ marginBottom: "1rem" }}>
        <button onClick={() => handleFilterClick("All")}>All</button>
        <button onClick={() => handleFilterClick("In Delivery")}>In Delivery</button>
        <button onClick={() => handleFilterClick("Delivered")}>Delivered</button>
        <button onClick={() => handleFilterClick("Order")}>Order</button>
        <button onClick={() => handleFilterClick("All")}>All</button>
      </div>

      {/* Table Placeholder */}
      <div style={{ marginBottom: "1rem", padding: "1rem", border: "1px solid #ccc" }}>
        {/* Your table component goes here, using tableData */}
        Table content for {activeFilter}
      </div>

      {/* Bottom Toggle Button */}
      <div>
        <button onClick={() => handleFilterClick("All")}>{activeFilter}</button>
      </div>
    </div>
  );
}

How It Works #

• The activeFilter state acts as a single source of truth for which filter is selected
• Every button click updates this state, which automatically reflects in the bottom button's text
• Clicking the bottom button (even when it shows "In Delivery" or another value) will reset the state back to "All", switching the text and your table filter accordingly

内容的提问来源于stack exchange，提问作者user10727653