如何在语义-ui-react 中自动聚焦输入字段？答案

【问题标题】：How to autofocus an input field in semantic-ui-react?如何在语义-ui-react 中自动聚焦输入字段？
【发布时间】：2018-08-17 02:04:39
【问题描述】：

我很难使用语义 UI 反应自动聚焦输入字段。 documentation 似乎不包含 autoFocus 道具，focus 道具也没有像预期的那样将光标放在输入字段内。

<Form onSubmit={this.handleFormSubmit}>
  <Form.Field>
    <Form.Input
      onChange={e => this.setState({ username: e.target.value })}
      placeholder='Enter your username'
      fluid />
  </Form.Field>
</Form>

编辑：此代码有效：

<Form onSubmit={this.handleFormSubmit}>
  <Form.Input
    onChange={e => this.setState({ username: e.target.value })}
    placeholder="Enter your username"
    autoFocus
    fluid />
</Form>

【问题讨论】：

标签： semantic-ui-react

【解决方案1】：

我会假设语义 UI 会将所有未知道具传递给根元素，即输入。因此，如果是这样，您应该能够为其添加 autoFocus 属性，如果不是，您将必须控制哪个输入在您的状态下被聚焦。

<Input placeholder='Search...' focus={this.state.focusedElement === "search"}/>

【讨论】：

【解决方案2】：

focus 属性纯粹是为输入的外观添加焦点效果，它实际上并没有设置焦点。

Semantic 未使用的任何 props 都是 passed down to the DOM element，所以如果你设置了一个 autoFocus prop，它应该下到输入。

但是，正如Form documentation 中所述：

Form.Input

<Form.Field control={Input} /> 加糖。

所以你的代码应该是：

const yourForm = (
  <Form onSubmit={this.handleFormSubmit}>
    <Form.Input
      onChange={e => this.setState({ username: e.target.value })}
      onSelect={() => this.setState({ usernameErr: false })}
      placeholder="Enter your username"
      error={usernameErr}
      iconPosition="left"
      name="username"
      size="large"
      icon="user"
      fluid
      autoFocus
    />
  </Form>
)

请注意，这仅在您希望在安装包装器组件时立即发生焦点时才有效。如果你想在输入被挂载后聚焦，你必须使用一个 ref 并在其上调用focus() 方法，就像在documentation 中显示的那样，如下所示：

class InputExampleRefFocus extends Component {
  handleRef = (c) => {
    this.inputRef = c
  }

  focus = () => {
    this.inputRef.focus()
  }

  render() {
    return (
      <div>
        <Button content='focus' onClick={this.focus} />
        <Input ref={this.handleRef} placeholder='Search...' />
      </div>
    )
  }
}

希望有帮助！

【讨论】：

【解决方案3】：

为了告诉输入域焦点，你需要创建一个对输入域的引用（ref），如下所示：

import React, { useState, useRef } from 'react';
import { Input, Button } from 'semantic-ui-react';

const SearchInputExample = () => {
  const [searchValue, setSearchValue] = useState('');

  // Create reference to the input field
  const searchRef = useRef(null);

  const handleSearchValueChange = event => setSearchValue(event.target.value);

  return (
    <div>
      <Input
        placeholder="Search..."
        // Assign the ref created to a ref attribute
        ref={searchRef}
        value={searchValue}
        onChange={handleSearchValueChange}
      />
      <Button
        onClick={() => {
          setSearchValue('');
          // Use the ref assigned to put the focus inside the input
          searchRef.current.focus();
        }}
      >
        Clear search (and focus)
      </Button>
    </div>
  );
};

export default SearchInputExample;

您可以阅读有关 useRef() 钩子 here 的更多信息

【讨论】：