我目前正在学习React中的钩子概念,并试图理解下面的例子。

import { useState } from 'react';

function Example() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

上面的示例增加了处理程序函数参数本身的计数器。如果我想修改事件处理函数内的计数值怎么办

考虑下面的例子:

setCount = () => {
  //how can I modify count value here. Not sure if I can use setState to modify its value
  //also I want to modify other state values as well here. How can I do that
}

<button onClick={() => setCount()}>
  Click me
</button>

当前回答

谢谢loelsonk,我做到了

const [dataAction, setDataAction] = useState({name: '', description: ''}); const _handleChangeName = (data) => { if(data.name) setDataAction( prevState => ({ ...prevState, name : data.name })); if(data.description) setDataAction( prevState => ({ ...prevState, description : data.description })); }; ....return ( <input onChange={(event) => _handleChangeName({name: event.target.value})}/> <input onChange={(event) => _handleChangeName({description: event.target.value})}/> )

其他回答

React useState是React钩子,允许你在功能组件中管理状态。

例如:

import React, { useState } from 'react'

const Example = () => {
  // create the "counter" state
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Button clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Count + 1
      </button>
    </div>
  )
}

export default Example

使用useState,您可以轻松地创建有状态的功能组件。 旧的等效方法,使用Component类和setState类组件是:

import React, { Component } from 'react'

class Example extends Component {
  constructor(props) {
    super(props)
    this.state = { count: 0 }
  }

  render() {
    const { count } = this.state
    return (
      <div>
        <p>Button clicked {count} times</p>
        <button onClick={() => this.setState({ count: count + 1 })}>
          Count + 1
        </button>
      </div>
    )
  }
}

export default Example

来源:

React useState Hook:什么是新的和使用它

链接:

React Hooks文档

React钩子是一种新的方式(仍在开发中)来访问React的核心功能,如状态,而不必使用类,在你的例子中,如果你想直接在处理程序函数中增加一个计数器,而不直接在onClick道具中指定它,你可以这样做:

...
const [count, setCounter] = useState(0);
const [moreStuff, setMoreStuff] = useState(...);
...

const setCount = () => {
    setCounter(count + 1);
    setMoreStuff(...);
    ...
};

和onClick:

<button onClick={setCount}>
    Click me
</button>

让我们快速解释一下这句话是怎么回事:

const [count, setCounter] = useState(0);

useState(0)返回一个元组,其中第一个参数count是计数器的当前状态,setCounter是允许我们更新计数器状态的方法。我们可以使用setCounter方法在任何地方更新count的状态——在这种情况下,我们在setCount函数内部使用它,在那里我们可以做更多的事情;使用钩子的想法是,我们能够使我们的代码更具功能性,并避免在不需要/不需要的情况下使用基于类的组件。

我写了一篇关于钩子的完整文章,其中有多个示例(包括计数器),比如这个代码依赖,我使用了useState、useEffect、useContext和自定义钩子。我可以更详细地介绍钩子如何在这个答案上工作,但是文档很好地解释了状态钩子和其他钩子的细节。

更新:钩子不再是一个建议,因为16.8版本他们现在可以使用,在React的网站上有一个部分回答了一些常见问题。

useState钩子的语法很简单。

const [value, setValue] = useState(defaultValue)

如果您不熟悉这个语法,请到这里。

我建议您阅读文档。有很好的解释和大量的例子。

import { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); // its up to you how you do it const buttonClickHandler = e => { // increment // setCount(count + 1) // decrement // setCount(count -1) // anything // setCount(0) } return ( <div> <p>You clicked {count} times</p> <button onClick={buttonClickHandler}> Click me </button> </div> ); }

上面提供的答案很好,但让我插一句,useState是异步的,所以如果你的下一个状态依赖于你的前一个状态,你最好给useState一个回调。请看下面的例子:

import { useState } from 'react';

function Example() {
    const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      // passing a callback to useState to update count
      <button onClick={() => setCount(count => count + 1)}>
        Click me
      </button>
    </div>
  );
}

如果您的新状态依赖于旧状态的计算,这是推荐的方法。

useState是一个钩子,它允许你在函数组件中使用状态变量。

React中有两种类型的组件:类组件和功能组件。

类组件是扩展自React的ES6类。组件,可以有状态和生命周期方法:

class Message extends React.Component {
constructor(props) {
super(props);
this.state = {
  message: ‘’    
 };
}

componentDidMount() {
/* ... */
 }

render() {
return <div>{this.state.message}</div>;
  }
}

函数式组件是只接受参数作为组件属性并返回有效JSX的函数:

function Message(props) {
  return <div>{props.message}</div>
 }
// Or as an arrow function
const Message = (props) =>  <div>{props.message}</div>

如您所见,没有状态或生命周期方法。