react-safe-universal-inputs
This module fixes a race condition when using controlled inputs combined with server-side rendering. If an input is changed before React is loaded, the change will not be registered.
Demo: https://react-safe-universal-inputs.herokuapp.com
Usage:
yarn add react-safe-universal-inputs
or npm install --save react-safe-universal-inputs
Optionally pass a function to onEarlyInput
that handles a changed node, otherwise onChange
is called.
Called once with componentDidMount
and is only called if the value has changed before the initial react render.
import React Component from 'react';import Input Select from 'react-safe-universal-inputs'; { ; thisstate = text: 'initial text' select: 'yes' ; thishandleEarlyInput = thishandleEarlyInput; thishandleChange = thishandleChange; } { const value = inputNodevalue; this; } { event; const type = eventtargettype; const name = eventtargetname; this; } { return <form> <Input ="text" ="text" = = /> <Select ="select" = = = > <option ="yes">yes</option> <option ="no">no</option> </Select> </form> ; }
See the /example/
folder / demo for more examples.
Known Issues:
- ref is not accessible.
<textarea
is not currently supported.