I work on React Project and have a some functions which defines some conditions when render the components on page, but I need to call to all functions again in components when onClick button and render random numbers.
example:
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>
)
}
CodePudding user response:
You code for React is incomplete. TO get a button to work, you need code such as this:
<Button
variant="outline-secondary"
id="button-addon2"
disabled={email === ''}
onClick={() => sendReport()}>
Send report
</Button>
Now this will calls a function named sendReport(). For example:
const sendReport = async () => { service.mailItem(email).catch((e) => {setError(e.message)}); }
Your code has no onClick() method.
CodePudding user response:
Your three numbers need to be moved to state, which enables you to update them on click.
Use a handleClick
function to update the three state variables.
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>
)
}
CodePudding user response:
If you want to update your values, you have to cause a render by updating a state, maybe be doing this way
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>
)
}
CodePudding user response:
onClick
function can be used like this :
onClick = {handleClickFn}
or
onClick = {(e) => handleClickFn(e)}
Both works fine.
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>
)
}