web-dev-qa-db-ja.com

Semantic-ui-reactで入力フィールドをオートフォーカスする方法は？

私はsemantic-ui-reactを使用して入力フィールドをオートフォーカスするのに苦労しています。 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
7
Matt MacPherson

focuspropは、純粋に入力の外観にフォーカス効果を追加するためのものであり、実際にはフォーカスを設定しません。

セマンティックで使用されていない小道具はすべて 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>
)
_

これは、ラッパーコンポーネントがマウントされたときにフォーカスを発生させたい場合にのみ機能することに注意してください。マウント後に入力のフォーカスを変更する場合は、 documentation に示すように、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>
    )
  }
}
_

お役に立てば幸いです。

14
Tydax

セマンティックUIは、すべての不明な小道具をルート要素である入力に渡すと想定していました。したがって、含まれている場合は、autoFocus属性を追加できるはずです。追加されていない場合は、自分の状態でフォーカスされている入力を制御する必要があります。

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