如何在语义-ui-反应中自动聚焦输入字段？

Question

我很难用语义-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>

Answer 1

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

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

Answer 2

focus道具纯粹是给input的外观加上焦点效果，并没有真正设置焦点。

Semantic 未使用的任何属性都是 passed down to the DOM element，因此如果您设置 autoFocus 属性，它应该进入输入。

但是，如 Form documentation 中所述：

Form.Input

Sugar for <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>
)

请注意，这仅在您希望焦点在安装包装器组件时发生的情况下才有效。如果你想在 input 挂载后聚焦它，你必须使用一个 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>
    )
  }
}

希望对您有所帮助！

Answer 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

如何在语义-ui-反应中自动聚焦输入字段？

How to autofocus an input field in semantic-ui-react?

semantic-ui-react