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

Question

我在用语义UI react 自动聚焦输入字段时遇到了困难。 documentation似乎未包含autoFocus Prop ，并且focus Prop 未将光标放置在输入字段中，这与预期的一样。

<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

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

语义未使用的所有 Prop 都是passed down to the DOM element，因此，如果您设置了autoFocus Prop ，则应向下输入。

但是，如 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>
)

请注意，仅当您希望在装入包装器组件时正确发生焦点时，此方法才有效。如果要在装入后集中输入内容，则必须使用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>
    )
  }
}

希望对您有所帮助!