webentwicklung-frage-antwort-db.com.de

Wie fokussiere ich ein Eingabefeld in semantic-ui-react?

Es fällt mir schwer, ein Eingabefeld mit Semantik-UI-Reaktion zu fokussieren. Die Dokumentation scheint keine autoFocus Requisite zu enthalten und die focus Requisite platziert den Cursor nicht wie erwartet im Eingabefeld.

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

BEARBEITEN: Dieser Code funktioniert:

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

Die Variable focus dient lediglich dazu, einen Fokuseffekt auf das Erscheinungsbild der Eingabe zu setzen. Der Fokus wird nicht wirklich eingestellt.

Alle von Semantic nicht verwendeten Requisiten werden an das DOM-Element übergeben. Wenn Sie also eine autoFocus -Eigenschaft festlegen, sollte diese auf die Eingabe zurückgehen.

Wie in der Form-Dokumentation erklärt:

Form.Input

Zucker für <Form.Field control={Input} />.

Ihr Code sollte also eher lauten:

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

Beachten Sie, dass dies nur funktioniert, wenn der Fokus direkt beim Einhängen der Wrapper-Komponente erfolgen soll. Wenn Sie die Eingabe fokussieren möchten, nachdem sie eingehängt wurde, müssen Sie einen ref verwenden und die focus()-Methode aufrufen, genau wie in der documentation gezeigt:

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

Hoffentlich hilft das!

10
Tydax

Ich hätte angenommen, dass die semantische Benutzeroberfläche alle unbekannten Requisiten an das Wurzelelement, die Eingabe, übergeben würde. Wenn dies der Fall ist, sollten Sie das autoFocus-Attribut hinzufügen können. Wenn nicht, müssen Sie steuern, welche Eingabe in Ihrem Status fokussiert wird.

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