React-tags: Eingabe bei Unschärfe löschen

Haben Sie sich die Verwendung von v6 dieser Komponente angesehen?

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

Diese Version hat sowohl einen onBlur Callback als auch eine .clearInput() Methode 😄

Schön! Löst es für mich 🙂

@i-like-robots Entschuldigung, dass ich dies noch einmal kommentieren muss, aber es ist mir unklar, wie ich auf die Methode clearInput() zugreifen kann, da das Paket keine Referenz enthält? Normalerweise würde ich so etwas wie this.reactTagsRef.current.clearInput() um auf eine solche untergeordnete Methode zuzugreifen.

Fügen Sie Ihrer Instanz der Komponente ein ref , indem Sie das Beispiel in diesem Repository verwenden und es mit einem onBlur Callback erweitern:

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

Perfekt danke!