Question

我已将代码从组件更改为挂钩。我是新手，正在学习反应我需要帮助将其更改为挂钩我应该怎么做才能使其在功能上起作用？

更新：

我已经在下面发布了解决方案，但是当我单击输入时，它将带我到页面顶部

  const [nameFocused, setNameFocused] = useState(true);
<FormGroup
                    className={classnames("mt-5", {
                      focused: nameFocused,
                    })}
                  >
                    <InputGroup className="input-group-alternative">
                      <InputGroupAddon addonType="prepend">
                        <InputGroupText>
                          <i className="ni ni-user-run" />
                        </InputGroupText>
                      </InputGroupAddon>
                      <Input
                        placeholder="Your name"
                        type="text"
                        onFocus={(e) => setNameFocused(true)}
                        onBlur={(e) => setNameFocused(false)}
                      />
                    </InputGroup>
                  </FormGroup>

不相关：

<FormGroup
                    className={classnames("mt-5", {
                      focused: state.nameFocused,
                    })}
                  >
                    <InputGroup className="input-group-alternative">
                      <InputGroupAddon addonType="prepend">
                        <InputGroupText>
                          <i className="ni ni-user-run" />
                        </InputGroupText>
                      </InputGroupAddon>
                      <Input
                            placeholder="Your name"
                            type="text"
                            onFocus={e => this.setState({ nameFocused: true })}
                            onBlur={e => this.setState({ nameFocused: false })}
                          />
                    </InputGroup>
                  </FormGroup>
``

Answer 1

您应该在组件中使用useState钩子。

这里nameFocused是一个状态，并且setNameFocused等于类组件中的this.setState({ nameFocused: ...})。

import { useState } from 'react'

...
   const [nameFocused, setNameFocused] = useState(false)
              
   return (
    <FormGroup
      className={classnames("mt-5", {
        focused: nameFocused,
      })}
    >
      <InputGroup className="input-group-alternative">
        <InputGroupAddon addonType="prepend">
          <InputGroupText>
            <i className="ni ni-user-run" />
          </InputGroupText>
        </InputGroupAddon>
        <Input
              placeholder="Your name"
              type="text"
              onFocus={e => setNameFocused(true)}
              onBlur={e => setNameFocused(false)}
            />
      </InputGroup>
    </FormGroup>

   )
...

Answer 2

我只会告诉您如何使用挂钩处理状态，阅读文档并尝试自己找出其他挂钩。

这是您使用钩子处理状态的方式。首先，“声明”状态变量：

const [nameFocused, setNameFocused] = useState(false)

您必须首先import { useState } from react。 const [..]部分是数组解构。如果您不熟悉，请查收。基本上，这是如何工作的，useState钩子返回一个包含两个东西的数组，第一个是状态变量的默认值，第二个是设置状态变量的函数。您传递给useState函数的值将被视为默认值。在这种情况下，它是false。因此，在这行代码之后，我们有了nameFocused变量，其值为false，还有setNameFocused函数来设置变量的值。

就像我已经提到的那样，setNameFocused函数可用于设置状态nameFocused的值。因此，您的onBlur和onFocus处理程序将如下所示：

...
  onBlur={() => setNameFocused(false)}
  onFocus={() => setNameFocused(true)}
...

需要注意的重要一件事是，挂钩应始终以相同的顺序调用，即永远不要在if块或类似的东西中调用挂钩。

Answer 3

import React,{useState} from "react"

1将类定义更改为函数定义，并删除每个关键字。vscode上的（command + shift + L）

let first_function = ()=>{...}

2将render（）更改为返回

3将所有状态分组为一个初始状态变量[可选]

let initialState = {nameFocused:true || false}

4在功能组件内部声明状态

let [state,setState] = useState(initialState)

使用useState挂钩设置状态时为5

setState((previousState)=> ({...previousState, newState}))

示例：

<Input
    placeholder="Your name"
    type="text"
    onFocus={e => setState((prev)=>({...prev, nameFocused: true }))}
    onBlur={e => setState((prev)=>({...prev, nameFocused: false }))}
  />

6我们有useReducer钩子，有了这个，您就不必再麻烦总是保留前一个状态了。 react doc react hooks(useReducer)

反应挂钩-onFocus和onBlur

3 个答案: