web-dev-qa-db-fra.com

Comment mettre au point automatiquement un champ de saisie dans sémantique-ui-react?

J'ai du mal à mettre au point un champ de saisie avec sémantique-réactif. Le documentation ne semble pas inclure de prop autoFocus et le prop focus ne place pas le curseur dans le champ de saisie comme prévu.

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

EDIT: Ce code fonctionne: 

<Form onSubmit={this.handleFormSubmit}>
  <Form.Input
    onChange={e => this.setState({ username: e.target.value })}
    placeholder="Enter your username"
    autoFocus
    fluid />
</Form>
semantic-ui-react
6
Matt MacPherson

La propriété focus consiste uniquement à ajouter un effet de focus sur l'apparence de l'entrée, elle ne définit pas réellement le focus.

Tous les accessoires non utilisés par Semantic sont transmis à l'élément DOM , donc si vous définissez un prop autoFocus, il devrait descendre à l'entrée.

Cependant, comme expliqué dans la Form documentation :

Form.Input

Sucre pour <Form.Field control={Input} />.

Donc, votre code devrait plutôt être:

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

Notez que cela ne fonctionne que si vous souhaitez que le focus soit activé lorsque le composant wrapper est monté. Si vous voulez focaliser l'entrée après son montage, vous devez utiliser une référence et appeler la méthode focus() dessus, comme indiqué dans la documentation }, comme suit:

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

J'espère que cela pourra aider!

10
Tydax

J'aurais supposé que l'interface utilisateur sémantique transmettrait tous les accessoires inconnus à l'élément racine, l'entrée. Ainsi, si c'est le cas, vous devriez pouvoir y ajouter l'attribut autoFocus. Sinon, vous devrez contrôler l'entrée qui est focalisée dans votre état.

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