React-tags: 清除模糊输入

创建于 2020-01-14 · 5评论 · 资料来源: i-like-robots/react-tags

如果有一种方法可以清除模糊输入，那就太好了。

如果我们能够将 ref 传递给输入，或者通过类似于 clearInputOnDelete 的新道具，则可以完成此操作。

在我的用例中的原因是，如果我传递了一组固定的建议，并且用户输入了与建议不匹配的内容，那么他们会分散输入的焦点，然后看起来他们的输入是有效的并且将是保留。我想清楚的是，不会保留任何不匹配的文本条目。

question

资料来源

famouspotatoes

所有5条评论

您是否考虑过使用该组件的 v6？

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

这个版本有onBlur回调和.clearInput()方法😄

i-like-robots 于 2020-01-15

🎉1

好的！帮我解决了🙂

famouspotatoes 于 2020-01-16

👍1

@i-like-robots 很抱歉再次对此发表评论，但我不清楚如何访问clearInput()方法，因为包没有公开 ref ？通常我会使用类似this.reactTagsRef.current.clearInput()来访问这样的子方法。

famouspotatoes 于 2020-02-11

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

i-like-robots 于 2020-02-11

🎉1

很好，谢谢！

famouspotatoes 于 2020-02-12

此页面是否有帮助？

0 / 5 - 0 等级

React-tags: 清除模糊输入

所有5条评论

相关问题