React钩子-onFocus和onBlur

debugcn 发表于 Dev

瓦迪姆（Vadim Tomashevsky）

我已将代码从组件更改为挂钩。我是它的新手，我正在学习反应，我需要帮助将其更改为挂钩才能使它在功能反应上正常工作？

更新：

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

  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>
``

开发大师

您应该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>

   )
...

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。