javascript - Use hook in onClick - Stack Overflow

admin管理员组

文章数量:1419884

Is it possible to use a hook in the onClick?

Looking at this source:

import React, { useState, useEffect } from 'react'

export default function CounterUseState (props) {
  const [count, setCount] = useState(props.initialCount || 0)
  const add = () => { setCount(count + 1) }
  const minus = () => { setCount(count - 1) }
  const reset = () => { setCount(0) }

  return (
      <div className="counter">
        <span className="counter__count">{ count }</span>
        <button onClick={add}>+</button>
        <button onClick={minus}>-</button>
        <button onClick={reset}>Clear</button>
      </div>
    )
}

I would write it like this

import React, { useState, useEffect } from 'react' 

export default function CounterUseState (props) {
  const [count, setCount] = useState(props.initialCount || 0)

  return (
      <div className="counter">
        <span className="counter__count">{ count }</span>
        <button onClick={() => setCount(count + 1)}>+</button>
        <button onClick={() =>  setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Clear</button>
      </div>
    )
}

But I am not sure whether that is possible or not. In a "normal" class ponent, I could set the state inline on the click(). But then, useState, provides state for the lifetime of a ponent. Does it make sense live inside an inline function?

Is it possible to use a hook in the onClick?

Looking at this source:

import React, { useState, useEffect } from 'react'

export default function CounterUseState (props) {
  const [count, setCount] = useState(props.initialCount || 0)
  const add = () => { setCount(count + 1) }
  const minus = () => { setCount(count - 1) }
  const reset = () => { setCount(0) }

  return (
      <div className="counter">
        <span className="counter__count">{ count }</span>
        <button onClick={add}>+</button>
        <button onClick={minus}>-</button>
        <button onClick={reset}>Clear</button>
      </div>
    )
}

I would write it like this

import React, { useState, useEffect } from 'react' 

export default function CounterUseState (props) {
  const [count, setCount] = useState(props.initialCount || 0)

  return (
      <div className="counter">
        <span className="counter__count">{ count }</span>
        <button onClick={() => setCount(count + 1)}>+</button>
        <button onClick={() =>  setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Clear</button>
      </div>
    )
}

But I am not sure whether that is possible or not. In a "normal" class ponent, I could set the state inline on the click(). But then, useState, provides state for the lifetime of a ponent. Does it make sense live inside an inline function?

• javascript
• reactjs
• react-hooks

Share Improve this question Follow edited Aug 3, 2019 at 10:55 Edgar 6,8781111 gold badges3838 silver badges7474 bronze badges asked Aug 2, 2019 at 11:27 four-eyesfour-eyes 12.5k3737 gold badges130130 silver badges255255 bronze badges 2

• Yes that is possible and the remended way for functional ponents. – Domino987 Commented Aug 2, 2019 at 11:28
• 5 Both examples do exactly the same thing. Use whichever you prefer (I disagree with the statement that it's the 'remended' way - it's purely code style, and as far as I know the docs make no particular remendation). – Joe Clay Commented Aug 2, 2019 at 11:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Hooks cannot be initiated conditionally or on user actions. However what you are trying to do is call the state updater method on a user action which is correct and that is precisely why the updater method is available.

Also there is no difference between your first and second approach apart from the fact that you are taking out the function in the enclosing scope and giving it a name instead of defining it inline

Yes, it's fine to call your setCount method inline like your example.

All you're doing here is passing a function that will be called when the button is clicked - it's up to you whether you want to declare the function inline [your 2nd example], or refer to a variable that returns the constant [your 1st example].

You might find it more readable to do things inline when the ponent has very simple logic like yours. React-use is a popular library of hooks. They do it this way in their docs.

However, if you need to perform bunch of other actions inside the function before calling setCount, then it will probably be more readable to reference the function instead. For example:

const myComplicatedAdderFunction = () => { 
  // do other stuff
  setCount(count + 1) 
}

...

<button onClick={myComplicatedAdderFunction}>+</button>

本文标签： javascriptUse hook in onClickStack Overflow