Comments (5)
OK, I see the error of my ways here. The widget doesn't render the <label>
, it only renders the input. The label is rendered as well as whatever I supply for ui:widget
. I guess the id
question remains, even though my example no longer makes sense. My example does raise a different question, how I could replace a whole component, including the label, but that's for a separate issue...
from react-jsonschema-form.
I'm surprised your code snippet works; JSX requires to have a single root element, so you should use something like this:
'ui:widget': (props) ->
<div><input type="checkbox" id="ID"/><label htmlFor="ID">I agree</label></div>
Note that wrapping the input within the label would prevent duplicating the id information while keeping clicks on the label activating the input:
'ui:widget': (props) ->
<label><input type="checkbox" id="ID"/>I agree</label>
For unique id generation, the issue is probably to persist them along the entire lifecycle of the component, so that means persisting this in comp state, or keeping a whole tree of nested ids in root component state.
To be noted, maybe #45 would help achieving what you're after here.
Also, we don't have identified use cases for this in our current projects using this lib; so would you be willing to work on implementing this?
from react-jsonschema-form.
I'm trying to use a stateless widget (...) I could hope the component only loaded once (ouch)
Stateless components are indeed fully rendered every time they receive props. If you want to "initialize" a component, eg with something generated once attached to it, you need state, hence you can't use stateless components.
from react-jsonschema-form.
We now have generated unique ids for form widgets (docs).
from react-jsonschema-form.
@n1k0 Yet more awesomeness from y'all. Thanks.
from react-jsonschema-form.
Related Issues (20)
- Allow defining custom validation error HOT 4
- Is it possible to clear form errors programatically? HOT 2
- Crash when update to v5.17.0: util could not be found within the project or in these directories HOT 5
- Consider moving omit extra data functionality to schemaUtils HOT 1
- Unable to create precompiled validators due to compileSchemaValidators HOT 2
- SSR and dependencies sections cause hydration errors. HOT 1
- setting options via ui:widget object is no longer supported, use ui:options instead HOT 3
- <>
- `Form` renders extra fields that breaks validation HOT 1
- If/then/else shows a field despite dependent condition not met HOT 2
- Bug with array properties inside allOf HOT 1
- Pass errorSchema from ArrayField to ArrayFieldTemplate HOT 2
- doc about localization of ajv incomplete for MUI forms HOT 4
- <title> disable SUBMIT button when no changes AND handle units of measure HOT 1
- Urgent help with populating an enum/oneOf with the key values of an array/object map HOT 4
- Is there a complete example for custom field & widgets? HOT 1
- Ability to disable $ref resolution HOT 2
- Passing required as part of the schema without using the built-in errors HOT 2
- Object Template ReferenceError: Cannot access before initialization HOT 3
- Cannot change property value with liveOmit and omitExtraData for arrays of objects and conditionality HOT 5
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 react-jsonschema-form.