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

Отлично, спасибо!