React-tags: ぼかし時に入力をクリアする

このコンポーネントのv6の使用を検討しましたか？

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

このバージョンには、 onBlurコールバックと.clearInput()メソッドの両方があります😄

良い！ 私のためにそれを解決します🙂

@ i-like-robotsこれについてもう一度コメントして申し訳ありませんが、パッケージによって公開されている参照がないため、 clearInput()メソッドにアクセスする方法がわかりません。 通常、私はthis.reactTagsRef.current.clearInput()ようなものを使用して、そのような子メソッドにアクセスします。

このリポジトリの例を使用して、コンポーネントのインスタンスにrefを追加し、 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)}
        />
    )
  }
}

完璧です、ありがとう！