React-tags: 블러 시 입력 지우기

이 구성 요소의 v6을 사용하는 것을 보았습니까?

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

이 버전에는 onBlur 콜백과 .clearInput() 메소드가 모두 있습니다 😄

멋진! 나를 위해 그것을 해결 🙂

@i-like-robots 이에 대해 다시 논평을 해서 죄송합니다만 패키지에 의해 노출된 참조가 없기 때문에 clearInput() 메소드에 액세스하는 방법에 대해 나에게 불분명합니까? 일반적으로 this.reactTagsRef.current.clearInput() 와 같은 것을 사용하여 이와 같은 자식 메서드에 액세스합니다.

이 리포지토리의 예제를 사용하고 onBlur 콜백으로 확장하여 구성 요소의 인스턴스에 ref 를 추가합니다.

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

완벽합니다. 감사합니다!