status-im
/
reagent
mirror of https://github.com/status-im/reagent.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update ControlledInputs.md

This commit is contained in:
Juho Teperi 2020-04-15 09:55:56 +03:00 committed by GitHub
parent 712d2b5ddb
commit 1e11774189
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
doc/ControlledInputs.md
View File

@ -1,6 +1,6 @@
# Controlled inputs # Controlled inputs
Reagent uses async rendering which cause problems with controlled inputs. If Reagent uses async rendering which causes problems with controlled inputs. If
the input element is created directly by Reagent (i.e. `[:input ...]` in hiccup), [a the input element is created directly by Reagent (i.e. `[:input ...]` in hiccup), [a
workaround](https://github.com/reagent-project/reagent/blob/master/src/reagent/impl/template.cljs#L132-L238) workaround](https://github.com/reagent-project/reagent/blob/master/src/reagent/impl/template.cljs#L132-L238)
can be applied, but if the input is created by JS library (i.e. JSX `<input>` can be applied, but if the input is created by JS library (i.e. JSX `<input>`
@ -24,6 +24,21 @@ For JS libraries, usually the best solution is if the library provides an option
use custom component to create the input element, which enables use custom component to create the input element, which enables
Reagent to create the input element: Reagent to create the input element:
## React-native
ReactNative has it's own `TextInput` component. Similar workaround can't be (at least easily) implemented in ReactNative, as the component doesn't provide similar API as DOM Inputs to control the selection. Currently best option is to use controlled inputs (`default-value` and `on-change`). If you also need to update the input value from your code, you could change to Input component React key to force recreation of the component:
```clj
[:> TextInput
{:key @k
:default-value @v
:on-change ...}]
(reset! v "foo")
(swap! k inc)
;; When key changes, old component is unmounted and new one created, and the new component will use the new default-value
```
## Examples ## Examples
- [Material UI](./examples/material-ui.md) - [Material UI](./examples/material-ui.md)