React Hooks 与点击按钮
React Hooks with button on clicks
我刚开始使用 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;
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;
你不能只做 Buttons.count
。 Buttons是一个React组件,需要先创建,如:<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>
);
};
我刚开始使用 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;
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;
你不能只做 Buttons.count
。 Buttons是一个React组件,需要先创建,如:<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>
);
};