如何在React中调用一个onClick中的多个函数?

Question

我在React项目上工作，并且有一些函数定义了在页面上渲染组件时的一些条件，但我需要调用组件中的所有功能时，onClick按钮和渲染随机数

的例子:

export default function App(){
func1(){
// some func
//brings random number
}
func2(){
// some func
//brings random number
}
func3(){
// some func
//brings random number
}
const definedOne = func1();
const definedTwo = func2();
const defineTree = func3();
return(
<div>{definedOne}<div>
<div>{definedTwo}<div>
<div>{definedTree}<div>
<button onClick={// what need to click?}>Run Functions Again</button>
)
}

Answer 1

您的React代码不完整。要使按钮工作，您需要这样的代码:

<Button
variant="outline-secondary"
id="button-addon2"
disabled={email === ''}
onClick={() => sendReport()}>
Send report
</Button>

现在这将调用一个名为sendReport()的函数。例如:

const sendReport = async () =>{service.mailItem(电子邮件).catch ((e) =比;{setError (e.message)});}

你的代码没有onClick()方法。

Answer 2

您的三个数字需要移动到状态，这使您能够在单击时更新它们。

使用handleClick函数更新三个状态变量

export default function App(){
func1(){
// some func
//brings random number
}
func2(){
// some func
//brings random number
}
func3(){
// some func
//brings random number
}
handleClick(){
setDefinedOne(func1());
setDefinedTwo(func2());
setDefinedThree(func3());
}
const [definedOne, setDefinedOne] = useState(func1());
const [definedTwo, setDefinedTwo] = useState(func2());
const [definedThree, setDefinedThree] = useState(func3());
return(
<div>{definedOne}<div>
<div>{definedTwo}<div>
<div>{definedTree}<div>
<button onClick={handleClick}>Run Functions Again</button>
)
}

Answer 3

如果你想更新你的值，你必须通过更新状态来引起渲染，也许是这样做的

export default function App(){
func1(){
// some func
//brings random number
}
func2(){
// some func
//brings random number
}
func3(){
// some func
//brings random number
}
const obj = () => ({
definedOne: func1(),
definedTwo: func2(),
definedThree: func3()
})
const [state, setState] = useState(obj())
return(
<div>{state.definedOne}<div>
<div>{state.definedTwo}<div>
<div>{state.definedTree}<div>
<button onClick={() => {
setState({...obj()})
}}>Run Functions Again</button>
)
}

Answer 4

onClick函数可以这样使用:

onClick = {handleClickFn}

或

onClick = {(e) =>handleClickFn (e)}

两个都可以。

export default function App(){
const handleClickFn = (e) => {
console.log("You clicked button");
func1();
func2();
func3();
}
func1(){
// some func
//brings random number
}
func2(){
// some func
//brings random number
}
func3(){
// some func
//brings random number
}
const definedOne = func1();
const definedTwo = func2();
const defineTree = func3();
return(
<div>{definedOne}<div>
<div>{definedTwo}<div>
<div>{definedTree}<div>
<button onClick={handleClickFn}>Run Functions Again</button>
)
}