通過點擊按鈕反應鉤子-有解無憂

我剛開始使用 React hooks 并嘗試使用 3 個可以點擊的按鈕，它應該告訴我點擊了多少次。我可以讓它們單獨作業，但這不是高性能的。

因此，我正在尋找使其僅使用兩個類的方法：一個用于按鈕，另一個用于計數器部分。但是現在我正在努力呼叫函式并分離（單擊哪個）按鈕。

import React, { useState } from "react";
import Counter from "./Counter";
const Buttons = () => {
  const HandleClick = () => {
    setCounter(count   1);
  };
  const [count, setCounter] = useState(0);
  return (
    <div>
      <button className={"GoodBtn"} onClick={HandleClick}>
        Good
      </button>
      <button className={"NeutralBtn"} onClick={HandleClick}>
        Neutral
      </button>
      <button className={"BadBtn"} onClick={HandleClick}>
        Bad
      </button>
    </div>
  );
};

export default Buttons;

import React, { useState } from "react";
import Buttons from "./Buttons";

const Counter = () => {
  const [count, setCount] = useState(0);
  const teller = () => count   1;
  return (
    <div>
      <h2>Statistics</h2>
      <p>Good {Buttons.count}</p>
      <p>Neutral {Buttons.count}</p>
      <p>Bad {Buttons.count}</p>
    </div>
  );
};

export default Counter;

uj5u.com熱心網友回復：

import React, { useState } from 'react';
import Counter from "./Counter";
const Buttons = () => {
    const[count,setCounter]= useState({
         good: 0,
         neutral: 0,
         bad: 0
    });

     const HandleClick = (key) =>{
         setCounter(state => ({...state, [key]: state[key]   1}));
     }

     return (
         <div>
             <button className={"GoodBtn"} onClick={HandleClick('good')}>Good</button>
             <button className={"NeutralBtn"} onClick={HandleClick('neutral')}>Neutral</button>
             <button className={"BadBtn"} onClick={HandleClick('bad')}>Bad</button>
        
         <Counter counts={count} />
       </div>
    )
}

export default Buttons;




import React, { useState } from 'react';
import Buttons from "./Buttons";

const Counter = (props) => {
    return(
        <div>
            <h2>Statistics</h2>
            <p>Good {props.counts.good}</p>
            <p>Neutral {props.counts.neutral}</p>
            <p>Bad {props.counts.bad}</p>
        </div>
    )
}

export default Counter;

uj5u.com熱心網友回復：

你不能只是做Buttons.count。按鈕是一個陣營部件，其需要先創建，如：<Buttons />。

如果你想用計數器包裝你的按鈕組件，你可以這樣做：

const CountableButton = ({ onCounterChange, ...props }) => {
  const [count, setCounter] = useState(0);

  const handleClick = (event) => {
    //to correctly change state variable based on previous value
    setCounter((prevCounter) => prevCounter   1); 
  };

  //Every time count changes trigger the onCounterChange function
  React.useEffect(() => {
    onCounterChange(count);
  }, [count]);

  return (
    <button {...props} onClick={handleClick}>
      Good
    </button>
  );
};

你會像這樣使用它：


const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Button clicked {count} times</h2>
      <CountableButton onCounterChange={(value) => setCount(value)} />
    </div>
  );
};

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/367825.html

標籤：javascript 反应网络反应钩子网络风暴

上一篇：Firebasev9-獲取參考檔案內容

下一篇：異步/等待-操作順序不起作用