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

Question

我很难用语义ui-react自动对焦输入字段.该文件似乎不包括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

该focus道具纯粹是为了增加对输入的appareance一个焦点效应,它实际上并没有将焦点设置.

Semantic未使用的任何道具都会传递给DOM元素,因此如果您设置autoFocus道具,它应该转到输入.

但是,如Form文档中所述:

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()在其上调用方法,就像文档中所示,如下所示:

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>
    )
  }
}

希望有所帮助!