I want to add a in a react semantic UI
but it cannot send the checked value to server even after I name Checkbox like this:
<Form.Field
label="The question is new to the intent library"
name="newType"
control={Field}
component={Checkbox}
/>
This component is inside a form like this:
<Form>
<Form.Field
label="Rating"
control={Field}
name="rate"
component={Rating}
...
/>
<That checkbox ... />
<Form.Field
label="Comment"
control={Field}
name="comment"
component="textarea"
/>
</Form>
Supposed action should carry the checked value in payload, similar to how rating and comment are carried.
I am stuck in this for half a day
Please help me if you notice something. Thanks!
The problem is solved by using the following code
<Form.Field
control={Field}
label="The question is new to the intent library"
name="newType"
component="input"
type="checkbox"
/>
Related
Hi so I'm learning about razor, and razor pages; and I'm working on adding items to a simple db.
I noticed something odd with the input in my form when I try to enter a Quantity (should be a int) it throws an error when I press 1 or any number; and says it should be string/Array/collection? Whats that about??
code excerpt from Products.razor:
#if (products != null) // Insert form
{
<EditForm Model="#product" OnValidSubmit="#HandleAdd">
<DataAnnotationsValidator />
<ValidationSummary />
<InputText placeholder="Product Name" id="ProductName" #bind-Value="#product.ProductName" />
<br />
<InputText placeholder="Unit of Measurement" id="Unit" #bind-Value="#product.Unit" />
<br />
<InputNumber min="1" step="1" placeholder="Quantity" id="Quantity" #bind-Value="#product.Quantity" />
<br />
<InputNumber min="0.01" step="0.01" placeholder="Unit Price" id="UnitPrice" #bind-Value="#product.UnitPrice" />
<br />
<InputText placeholder="Category" id="Category" #bind-Value="#product.Category" />
<br />
<button type="submit">Submit</button>
</EditForm>
Wierd error in colsole:
I did notice someone had an idea on a un-related question:
Blazor EditForm adding InputNumber fields
But I treid that and its still not working; and additionally with this form code; now the little green border box indicating valid input doesnt light up.
Any help would be appreciated :D
Made a mistake in the constrution of my Product class applying a [MaxLength] attribute to my Quantity.
Removed it, add new migrations, and now it works :)
I am using a React redux-form input and this is my code:
return (
<Field
key={name}
component={SurveyField}
type="text"
label={label}
name={name}
autocomplete="off"
/>
);
I don't want chrome to autoComplete the form.
I have tried both but none working.
autocomplete="off"
autoComplete="off"
I suppose Chrome just ignores the autoComplete. I have seen the other StackOverflow questions but they are not helpful.
I find that adding the autocomplete property to the <input autoComplete="off"/> tag defined in your component callback function rather than depending on the redux-form <Field /> tag to pass this property to DOM will properly set this property in the html generated and autocomplete="off" will work as expected.
I am new to React.
I am using Bootstrap to render my page. All the other tags seem to be working apart from the InputGroup.Text. It doesn't render the id attribute of the text field. It looks as below if I inspect the element:
<input placeholder="Type your question here" class="form-control">
I have tried directly entering "1" as the id and that doesn't render either.
<InputGroup size="sm" className="mb-3">
<InputGroup.Prepend>
<InputGroup.Text id={ans.answerno}>{this.mapAlpha(ans.answerno)}</InputGroup.Text>
</InputGroup.Prepend>
<FormControl placeholder="Type your answer here" />
<Form.Check type="checkbox" id={ans.answerno} label="mark answer" />
</InputGroup>
I have checked the documentation online and this seems to me how it should work. Can anyone advise?
It seems like the id is located inside a span before the <input>.
Even checking the documentation rendered code
I am trying to create a rock, paper and scissor game in react. I would assume that it makes sense to use a form for this, I would atleast use a form haven't it been for react.
I figured that the simplest way of doing this, would be three radio inputs and a submit.
However, since I want to use three pictures as the actual radio buttons. Would it even make sense to use a form since react aims to take the state out of the form. This is the point in my code where i realized that I might be on a sidetrack.
onChangeHandler = (event) => {
this.setState({ [event.target.name]: event.target.value });
}
render() {
return (
<div>
<div>
<form>
<input type="radio" value="Rock" name="gender" onChange={this.onChangeHandler} /> Rock
<input type="radio" value="Paper" name="gender" onChange={this.onChangeHandler} /> Paper
<input type="radio" value="Scissor" name="gender" onChange={this.onChangeHandler} /> Scissor
<input type="submit" value="Submit" onClick = () => {submit()}/>
</form>
</div>
<div>
<img id="r" value="rock" src="http://www.jerrylow.com/demo/rps/rock.svg" alt="a rock" />
<img id="p" value="paper" src="http://www.jerrylow.com/demo/rps/paper.svg" alt="a piece of paper" />
<img id="s" value="scissor" src="http://www.jerrylow.com/demo/rps/scissor.svg" alt="a scissor" />
</div>)
}
Should I use this form, even though the form serves no particular purpose. If yes, how should i integrate it with the img elements?
You have a few ways of going about it. You can forgo the form entirely and attach onClick listeners to each of the images that would modify the state when clicked and then have a button that when clicked would call your submit function.
Or, if you wish to retain the form, you could either wrap the radio buttons and images in labels, hide the radio buttons such that when the image is clicked, it would trigger the onChange. Or, you could specify a for prop on the label that matches the id of a radio button and have the image in that and it would behave as the previously described, something like
<input type="radio" id="myButton" onChange={handleChange} />
<label for="myButton"><img src="img.png" /></label>
I guess it really comes down to the solution you want because either way would be fine. I would personally prefer not using a form for this scenario purely because it's not that necessary and the code would be smaller.
There are two ways you can get input changes in your React app.
One is by using
<input type="text" onChange={this.handleChange} />
The other was is
<form onChange={this.handleChange} onSubmit={this.handleChange} />
...
</form>
When you should use first one and when the other one.
The reason that there are two ways is because there are more than the two ways. You can do this too:
<div onChange={this.handleChange}>
<form>
<input />
</form>
</div>
I'd argue that the first approach is better because the handler receives the event as early as possible and possibly because the binding between the input and the component state is encoded within the render function, but that depends on what the handler would look like.