Comments (4)
Create your own <Input />
tag which behaves like this. This is the normal way of handling such a situation in the way needed for you.
For the start copy Input implementation from tags.jsx. Then change the way how it handles the validation error which is enclosed in the link. There is no magic at all, the creation of your own controls is straightforward:
https://github.com/Volicon/NestedLink/blob/master/tags.jsx#L35
Your Input must know whenever it's focused or touched and suppress displaying the validation error if it's not. Probably, you will need to add the local state to it to make it remember such a thing.
from nestedlink.
You're supposed to create your own controls wrapping all necessary styles and handling error formatting, in the way that your forms will be defined with the semantic markup. That's an overall idea and links makes it practically possible. tags.jsx
is just an example and the starting boilerplate.
That's how it is done in userslist example:
const ValidatedInput = ( props ) => (
<div>
<Input { ...props } />
<div className="validation-error">
{ props.valueLink.error || '' }
</div>
</div>
);
https://github.com/Volicon/NestedLink/blob/master/example/src/userslist.jsx#L150
You need to do the same thing but use raw <input/>
and add the local state to make it remember whenever it was touched. That's it.
from nestedlink.
OK, thanks I'll try it :-)
Yesterday I „solved“ it using onBlur={() => this.setState({titleTouched: true})}
but having more local state in a subcomponent did not feel right.
from nestedlink.
Yesterday I „solved“ it using onBlur={() => this.setState({titleTouched: true})} but having more local state in a subcomponent did not feel right.
It is okay. You need to hide this local state in <Input/>
itself once and forget about it. This state is entirely private and there is no reason to expose it outside.
from nestedlink.
Related Issues (20)
- link.props must work with checkbox and radio
- input element loses focus after typing HOT 9
- Bug: eMail input auto trims value and resets cursor position HOT 1
- Working on a nestedlink course/docs for class HOT 1
- Add custom validation pattern to the docs HOT 2
- Enhancement: Convenience onX method binding pattern for Link.Component classes HOT 1
- LinkeComponent.links is null HOT 1
- IE9: deleting data in input doesn't go to the state HOT 1
- TypeError: Cannot read property 'value' of undefined at Input (tags.js:64) HOT 1
- Documentation about type="radio" HOT 2
- Validation don't reevaluates when a dependent state changes HOT 1
- Could not find a declaration file for module 'valuelink/tags'
- Is there a way to handle `undefined` values?
- Question: how to link a property which is an array of objects HOT 1
- valuelink cannot be used server side HOT 2
- onChange is called before state is changed
- LinkAll with React.useState hook HOT 2
- Synthetic event error when using useLink with value inicialization.
- Input type "number" in NumberInput in linked-controls
- Module not found: Can't resolve 'tslib'
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nestedlink.