React-tags: Borrar entrada en desenfoque

¿Ha pensado en utilizar la v6 de este componente?

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

Esta versión tiene un método onBlur callback y .clearInput() 😄

¡Bonito! Me lo resuelve 🙂

@ i-like-robots Perdón por comentar nuevamente sobre esto, pero no tengo claro cómo acceder al método clearInput() ya que el paquete no expone ninguna referencia. Normalmente, usaría algo como this.reactTagsRef.current.clearInput() para acceder a un método secundario como ese.

Agregue un ref a su instancia del componente, usando el ejemplo en este repositorio y extendiéndolo con una devolución onBlur llamada

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

¡Perfecto gracias!