我使用 React Hook 来增加和减少数字。但是当减少到0以下然后计算负值时我遇到了一个问题,我不想要负值,
如何使用react hook停止负值?
我已经尝试过这段代码。
import React, { useState, useEffect } from "react";
const Home = () => {
const [count, setCount] = useState(0);
const onClick = () => {
setCount(count + 1);
};
const onClickDec = () => {
setCount(count - 1);
};
return (
<div>
<h1>Please click me for increase {count}</h1>
<button className="btn btn-primary btn-sm" onClick={onClick}>
+
</button>
<button className="btn btn-primary btn-sm" onClick={onClickDec}>
-
</button>
</div>
);
};
export default Home;
任何建议,请。
Thanks
每当count
减少得到最大值(使用Math.max()
) of count - 1
和 0 之后:
const { useState } = React;
const Home = () => {
const [count, setCount] = useState(0);
const onClick = () => {
setCount(c => c + 1);
};
const onClickDec = () => {
setCount(c => Math.max(c - 1, 0));
};
return (
<div>
<h1>Please click me for increase {count}</h1>
<button className="btn btn-primary btn-sm" onClick={onClick}>
+
</button>
<button className="btn btn-primary btn-sm" onClick={onClickDec}>
-
</button>
</div>
);
};
ReactDOM.render(
<Home />,
root
)
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>
如果你想限制增加到一定数量,你可以使用相同的想法Math.min()
:
const { useState } = React;
const Home = () => {
const [count, setCount] = useState(0);
const onClick = () => {
setCount(c => Math.min(c + 1, 3));
};
const onClickDec = () => {
setCount(c => Math.max(c - 1, 0));
};
return (
<div>
<h1>Please click me for increase {count}</h1>
<button className="btn btn-primary btn-sm" onClick={onClick}>
+
</button>
<button className="btn btn-primary btn-sm" onClick={onClickDec}>
-
</button>
</div>
);
};
ReactDOM.render(
<Home />,
root
)
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)