uncontrollable

tidak terkendali

Bungkus komponen reaksi terkontrol, untuk memungkinkan pasangan prop/pawang tertentu dihilangkan oleh konsumen komponen. Tidak dapat dikendalikan memungkinkan Anda untuk menulis komponen bereaksi, dengan keadaan minimal, dan kemudian membungkusnya dalam komponen yang akan mengelola keadaan untuk penyangga/penangan jika dikecualikan.

Memasang

npm i -S uncontrollable

Penggunaan

Jika Anda sedikit tidak yakin mengapa modul ini baca bagian berikutnya terlebih dahulu. Jika Anda hanya ingin melihat beberapa contoh dunia nyata, lihat widget React yang memanfaatkan strategi ini.

 import { uncontrollable } from 'uncontrollable' ;

API

useUncontrolledProp(value, defaultValue, onChange) => [value, onChange]

Kait bereaksi yang dapat digunakan sebagai pengganti komponen orde tinggi di atas. Ini mengembalikan satu set lengkap props yang aman untuk disebarkan ke elemen anak.

 import { useUncontrolledProp } from 'uncontrollable' ;

const UncontrolledCombobox = ( { value , defaultValue , onChange } ) => {
  // filters out defaultValue, defaultOpen and returns controlled
  // versions of onChange, and onToggle.
  const [ controlledValue , onControlledChange ] = useUncontrolledProp (
    value ,
    defaultValue ,
    onChange
  ) ;

  return < Checkbox { ... controlledProps } / > ;
} ; 

useUncontrolled(props, propsHandlerHash) => controlledProps

Kait bereaksi yang dapat digunakan sebagai pengganti komponen orde tinggi di atas. Ini mengembalikan satu set lengkap props yang aman untuk disebarkan ke elemen anak.

 import { useUncontrolled } from 'uncontrollable' ;

const UncontrolledCombobox = ( props ) => {
  // filters out defaultValue, defaultOpen and returns controlled
  // versions of onChange, and onToggle.
  const controlledProps = useUncontrolled ( props , {
    value : 'onChange' ,
    open : 'onToggle' ,
  } ) ;

  return < Checkbox { ... controlledProps } / > ;
} ;

Gunakan kasing

Salah satu kekuatan bereaksi adalah model ekstensibilitasnya, diaktifkan oleh praktik umum mendorong keadaan komponen setinggi mungkin di atas pohon. Meskipun sangat bagus untuk memungkinkan sangat fleksibel dan mudah untuk bernalar tentang komponen, ini dapat menghasilkan banyak boilerplate untuk komponen kawat dengan setiap penggunaan. Untuk komponen sederhana (seperti input) ini biasanya masalah mengikat prop value input ke properti negara induk melalui pawang onChange -nya. Berikut adalah pola yang sangat umum:

  render ( ) {
    return (
      < input type = 'text'
        value = { this . state . value }
        onChange = { e => this . setState ( { value : e . target . value } ) }
      / >
    )
  }

Pola ini menggerakkan tanggung jawab mengelola value dari input ke basis data induknya dan meniru "dua arah". Namun, kadang -kadang, tidak perlu bagi orang tua untuk mengelola keadaan input secara langsung. Dalam hal ini, yang ingin kami lakukan adalah mengatur value awal input dan membiarkan input mengelolanya sejak saat itu. Bereaksi berurusan dengan ini melalui input "tidak terkendali", di mana jika Anda tidak menunjukkan bahwa Anda ingin mengontrol keadaan input secara eksternal melalui prop value itu hanya akan melakukan pemeliharaan buku untuk Anda.

Ini adalah pola hebat yang dapat kita gunakan dalam komponen kita sendiri. Seringkali yang terbaik adalah membangun setiap komponen untuk menjadi stateless mungkin, dengan asumsi bahwa orang tua akan ingin mengendalikan segala sesuatu yang masuk akal. Ambil komponen dropdown sederhana sebagai contoh

 class SimpleDropdown extends React . Component {
  static propTypes = {
    value : React . PropTypes . string ,
    onChange : React . PropTypes . func ,
    open : React . PropTypes . bool ,
    onToggle : React . PropTypes . func ,
  } ;

  render ( ) {
    return (
      < div >
        < input
          value = { this . props . value }
          onChange = { ( e ) => this . props . onChange ( e . target . value ) }
        / >
        < button onClick = { ( e ) => this . props . onToggle ( ! this . props . open ) } >
          open
        < / button >
        { this . props . open && (
          < ul className = "open" >
            < li > option 1 < / li >
            < li > option 2 < / li >
          < / ul >
        ) }
      < / div >
    ) ;
  }
}

Perhatikan bagaimana kami tidak melacak keadaan apa pun di dropdown sederhana kami? Ini bagus karena konsumen modul kami akan memiliki semua fleksibilitas untuk memutuskan apa perilaku dropdown seharusnya. Perhatikan juga API publik kami (proptipe), ini terdiri dari pola umum: properti yang kami inginkan ( value , open ), dan satu set penangan yang menunjukkan ketika kami ingin mereka diatur ( onChange , onToggle ). Terserah komponen induk untuk mengubah value dan open alat peraga sebagai respons terhadap penangan.

Meskipun pola ini menawarkan fleksibilitas dalam jumlah yang sangat baik kepada konsumen, itu juga mengharuskan mereka untuk menulis banyak kode boilerplate yang mungkin tidak akan banyak berubah dari penggunaan menjadi penggunaan. Kemungkinan besar mereka akan selalu ingin dibiarkan open sebagai tanggapan terhadap onToggle , dan hanya dalam kasus yang jarang ingin mengesampingkan perilaku itu. Di sinilah pola terkontrol/tidak terkendali masuk.

Kami hanya ingin menangani kasus terbuka/ontoggle jika konsumen tidak memberikan prop open (menunjukkan bahwa mereka ingin mengendalikannya). Daripada memperumit komponen dropdown kami dengan semua logika itu, mengaburkan logika bisnis dropdown kami, kami dapat menambahkannya nanti, dengan mengambil dropdown kami dan membungkusnya di dalam komponen lain yang menangani itu untuk kami.

uncontrollable memungkinkan Anda memisahkan logika yang diperlukan untuk membuat input yang dikendalikan/tidak terkendali yang memungkinkan Anda fokus membuat input yang sepenuhnya terkontrol dan membungkusnya nanti. Ini cenderung jauh lebih sederhana untuk dipikirkan juga.

  import { uncontrollable } from 'uncontrollable' ;

  const UncontrollableDropdown = uncontrollable ( SimpleDropdown , {
    value : 'onChange' ,
    open : 'onToggle'
  } )

  < UncontrollableDropdown
    value = { this . state . val } // we can still control these props if we want
    onChange = { val => this . setState ( { val } ) }
    defaultOpen = { true } / > // or just let the UncontrollableDropdown handle it
                          // and we just set an initial value (or leave it out completely)!

Sekarang kita tidak perlu khawatir tentang Open Ontoggle! Komponen yang dikembalikan akan melacak open untuk kami dengan mengasumsikan bahwa itu harus hanya dibiarkan open untuk apa pun yang dikembalikan onToggle . Jika kami ingin mengkhawatirkannya, kami hanya dapat menyediakan alat peraga open dan onToggle dan input yang tidak terkendali hanya akan melewati mereka.

Di atas adalah contoh yang dibuat tetapi memungkinkan Anda untuk membungkus komponen yang lebih kompleks, memberi Anda banyak fleksibilitas di API yang dapat Anda tawarkan kepada konsumen komponen Anda. Untuk setiap pasangan prop/penangan, Anda juga mendapatkan proptprop dari formulir "default [propname]" jadi value -> defaultValue , dan open -> defaultOpen , dll. Widget React memanfaatkan strategi ini, Anda dapat melihatnya beraksi dalam tindakan Di sini: https://github.com/jquense/react-widgets/blob/5d1b530cb094cdc72f577fe01abe4a02dd265400/src/multiselect.jsx#l521