React-tags: Limpando entrada no desfoque

Você já olhou como usar a v6 deste componente?

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

Esta versão tem tanto um onBlur callback e .clearInput() método 😄

Agradável! Resolve para mim 🙂

@ i-like-robots Desculpe por comentar sobre isso, mas não está claro para mim como acessar o método clearInput() , já que não há nenhuma referência exposta pelo pacote? Normalmente eu usaria algo como this.reactTagsRef.current.clearInput() para acessar um método filho como esse.

Adicione ref à sua instância do componente, usando o exemplo neste repo e estendendo-o com um retorno de chamada 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)}
        />
    )
  }
}

Perfeito, obrigado!