React-tags: Effacer l'entrée sur le flou

Avez-vous envisagé d'utiliser la v6 de ce composant ?

https://github.com/i-like-robots/react-tags/tree/6.0

Cette version a à la fois un onBlur callback et .clearInput() méthode 😄

Joli! Le résout pour moi 🙂

@i-like-robots Désolé de commenter à nouveau à ce sujet, mais je ne sais pas comment accéder à la méthode clearInput() car il n'y a pas de référence exposée par le package? Normalement, j'utiliserais quelque chose comme this.reactTagsRef.current.clearInput() pour accéder à une méthode enfant comme celle-ci.

Ajoutez un ref à votre instance du composant, en utilisant l'exemple de ce référentiel et en l'étendant avec un rappel onBlur :

class App extends React.Component {
  constructor (props) {
    super(props)

    this.state = {
      tags: [],
      suggestions: []
    }

+   this.reactTags = React.createRef()
  }

  onDelete (i) {
    const tags = this.state.tags.slice(0)
    tags.splice(i, 1)
    this.setState({ tags })
  }

  onAddition (tag) {
    const tags = [].concat(this.state.tags, tag)
    this.setState({ tags })
  }

+ onBlur () {
+   if (this.reactTags.current) {
+     this.reactTags.current.clearInput()
+   }
+ }

  render () {
    return (
        <ReactTags
+         ref={this.reactTags}
          tags={this.state.tags}
          suggestions={this.state.suggestions}
+         onBlur={this.onBlur.bind(this)}
          onDelete={this.onDelete.bind(this)}
          onAddition={this.onAddition.bind(this)}
        />
    )
  }
}

Parfait merci!