React-tags: Menghapus input pada blur

Dibuat pada 14 Jan 2020 · 5Komentar · Sumber: i-like-robots/react-tags

Alangkah baiknya jika ada cara untuk menghapus input pada blur.

Ini dapat dilakukan jika kami dapat meneruskan referensi ke input, atau melalui prop baru yang mirip dengan clearInputOnDelete.

Alasan dalam kasus penggunaan saya adalah jika saya memberikan serangkaian saran tetap, dan pengguna mengetik sesuatu yang tidak cocok dengan saran, maka mereka tidak memfokuskan input, maka sepertinya input mereka valid dan akan menjadi disimpan. Saya ingin memperjelas bahwa entri teks yang tidak cocok tidak akan disimpan.

question

Sumber

famouspotatoes

Semua 5 komentar

Sudahkah Anda melihat penggunaan v6 dari komponen ini?

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

Versi ini memiliki metode callback onBlur dan .clearInput()

i-like-robots pada 15 Jan 2020

🎉1

Bagus! Memecahkannya untuk saya

famouspotatoes pada 16 Jan 2020

👍1

@i-like-robots Maaf untuk mengomentari ini lagi, tetapi bagi saya tidak jelas bagaimana cara mengakses metode clearInput() karena tidak ada referensi yang diekspos oleh paket? Biasanya saya akan menggunakan sesuatu seperti this.reactTagsRef.current.clearInput() untuk mengakses metode anak seperti itu.

famouspotatoes pada 11 Feb 2020

Tambahkan ref ke instance komponen Anda, menggunakan contoh dalam repo ini dan memperluasnya dengan callback 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 pada 11 Feb 2020

🎉1

Sempurna, terima kasih!

famouspotatoes pada 12 Feb 2020

Apakah halaman ini membantu?

0 / 5 - 0 peringkat