英文:
how to add multi functions to the same useState on Reactjs?
问题
我是React的初学者！现在正在学习。
如何设置多个函数来更改单个数据？我的意思是，我创建了下面的重置函数，它的目的是重置这些数字。它运行正常！
仅仅举个例子，我还想创建一个函数来将“hour”，“minute”和“second”更改为值“2”。
哪种方法最好？
它将有两个按钮，每个按钮将激活“resetTime”或“changeToTwoTime”。
// data()
const [hour, resetHour] = useState(4)
const [minute, resetMinute] = useState(8)
const [second, resetSecond] = useState(12)
// methods
const resetTime = () => {
resetHour(0)
resetMinute(0)
resetSecond(0)
}
return (
<div className="p-3">
<MainButton
variantButton="outline-success"
textButton="START"
functionButton={resetTime}
/>
<MainButton
variantButton="outline-success"
textButton="START"
functionButton={changeToTwoTime}
/>
</div>
)
（请注意，上述代码示例中的changeToTwoTime函数还没有被定义，你需要定义它来更改“hour”，“minute”和“second”为值“2”）
英文:
I am a starter on React! Just learning right now
How can I set multi functions to change a single data? I mean, I created a reset function below which has the purpuse to reset the numbers. It is working fine!
Just for an example, I also want to create a function to change the 'hour', 'minute' and 'second' to the value '2'.
which is the best way to do it?
It will have two buttons and each button will activate the 'resetTime' or 'changeToTwoTime'.
//data()
const [hour, resetHour] = useState(4)
const [minute, resetMinute] = useState(8)
const [second, resetSecond] = useState(12)
// methods
const resetTime = () => {
resetHour(0)
resetMinute(0)
resetSecond(0)
}
return (
<div className="p-3">
<MainButton
variantButton="outline-success"
textButton="START"
functionButton={resetTime}
/>
<MainButton
variantButton="outline-success"
textButton="START"
functionButton={changeToTwoTime}
/>
</div>
)
答案1
得分: 2
只是举个例子，我也想创建一个函数来将'hour'、'minute'和'second'更改为值'2'。
实际上，您不需要复制函数。您只需简单地调整函数，使其接受一个参数，该参数将是日期的值。
const setTime = (value = 0) => {
resetHour(value);
resetMinute(value);
resetSecond(value);
}
'value'参数是可选的。如果不带任何参数调用该函数，它将简单地将时间重置为0。如果传递'value'，它将设置计时器为指定的'value'。
<div className="p-3">
<MainButton
variantButton="outline-success"
textButton="START"
functionButton={() => setTime()} // 重置计时器
/>
<MainButton
variantButton="outline-success"
textButton="START"
functionButton={() => setTime(2)} // 将其设置为2
/>
</div>
英文:
> Just for an example, I also want to create a function to change the 'hour', 'minute' and 'second' to the value '2'.
You don't need actually to duplicate the function. You could just simply adjust your function so it accepts an argument, which will be the value of the date.
const setTime = (value = 0) => {
resetHour(value);
resetMinute(value);
resetSecond(value);
}
The value argument is optional. If the function is called without any arguments, it will simply reset the times to 0. If value is passed, it will set the timers to that specified value.
<div className="p-3">
<MainButton
variantButton="outline-success"
textButton="START"
functionButton={() => setTime()} // reset timers
/>
<MainButton
variantButton="outline-success"
textButton="START"
functionButton={() => setTime(2)} // set it to 2
/>
</div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论