I created a custom ReactiveComponent based on the official docs: https://docs.appbase.io/docs/reactivesearch/v3/advanced/reactivecomponent/
This works fine, however when I use the component and clear the filter of my custom component, how can I update the ui state of the custom component?
Using the example in the docs: When clearing the color filter, how can I update the ColorPicker UI state to reflect that no color is selected?
Haven't found anything related to this in the docs.
In case anyone else encounters the same issue: The render props of include a value object which is set to null if you clear the filters. This way it is possible to conditionally update the ColorPicker UI state (or whatever custom component you use).
If I understand clear you need to use value that coming via render prop.
Here is an example usage from my project
render={({ data, handleChange, value }) => {
return (
<div
role="listbox"
aria-label="SpecialCategoryFilter-items"
className="list-filter"
>
{data.map((item) => (
<p
className="button-large-item"
key={item.key}
role="option"
aria-checked={value[item.key] ? true : false}
aria-selected={value[item.key] ? true : false}
>
<input
style={{ display: "none" }}
type="checkbox"
value={item.key}
onChange={(e) => {
handleChange(e);
}}
id={"SpecialCategoryFilter-" + item.key}
name={"SpecialCategoryFilter-" + item.key}
/>
<label
htmlFor={"SpecialCategoryFilter-" + item.key}
>
<span>{item.key}</span>
</label>
</p>
))}
</div>
);
}}
Related
Considering that the inputs can have disabled attributes, how one would set it up depending if the condition is true? :-)
Concept:
<input ${condition ? disabled : ''} />
Since falsy attributes are removed in HTL/Sightly, you can write:
<input disabled="${condition}" />
See also https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#2231-detailed-examples
It's been a while since this was posted but in case somebody still needs the answer is by using a model boolean variable (data-sly-use.model) and data-sly-attribute.disabled
It would be:
<input data-sly-attribute.disabled="${model.isDisabled}"/>
Or simply:
<input data-sly-attribute.disabled="${true}"/>
You can easily do that with vuejs.
It would be :
var app = new Vue({
el: '#app',
data: {
disabled: 0,
},
});
<input :disabled="disabled == 1" />
Sounds simple, but I couldn't find a hello-world example of this, despite the richness of the doc. The closest I could find was in https://react-hook-form.com/advanced-usage, in the Working with virtualized lists section, but that relies on another module react-window, which introduces further complexity.
I want to allow the admin user to create-update-delete a list of products, with various properties.
My current code in JSX looks like this, I'd like to take advantage of error handling etc from react-hook-form:
<ol >
{products.map((row, index) => (
<li
className={index === selectedProductIndex ? "selected" : ""}
key={index}
id={index} onClick={handleSelectProduct}>
{row.name}
</li>
))}
</ol>
<form onSubmit={handleSaveProduct}>
<p>Product name: </p>
<input name="productName" type="text" value={selectedProductName}
onChange={handleEdit_name} />
(... more properties to edit here)
</form>
The handlers save the values of selectedProductName, selectedProductIndex, etc in useState, in a database via axios, etc.
I'm handling the values of each field individually in the useState, which I'm aware is laborious and heavy-handed.
Well the answer was quite simple, although it took me a while to figure it out.
In most of the examples, the onChange or onClick handlers don't use the event object, but nothing prevents you from adding it in. Then there's the setValue function to set the other control's value. Here's the code of a hello-world example. It offers one dropdown and one input field, the input field updates to match the selected value of the dropdown.
import React from "react";
import {useForm} from "react-hook-form";
function Test() {
const {register, handleSubmit, errors, setValue} = useForm();
const mySubmit = data => {
console.log(data);
}
return (
<div>
<form onSubmit={handleSubmit(mySubmit)} className="reacthookform">
<select name="dropdown" ref={register}
onChange={(ev) => setValue("productName", ev.target.value)}>
{["AAA", "BBB", "CCC"].map(value => (
<option key={value} value={value}>
{value}
</option>
))}
</select>
<input name="productName" defaultValue="AAA" ref={register({required: true})} className="big"/>
{errors.productName && <p className="errorMessage">This field is required</p>}
<input type="submit" value="Save product"/>
</form>
</div>
);
}
export default Test;
I want to build a form using react-final-form that has multiple submit buttons, where each submit button sets a different value in the form. Essentially, I want to create a form that looks something like this in rendered HTML:
<form>
Are you over 18 years old?
<button type="submit">Yes</button>
<button type="submit">No</button>
</form>
However, I can't figure out how to make react-final-form treat these different submit buttons as setting values in the form. I tried combining component state, <input type="hidden">, and onClick handlers, like this:
class FormWithMultipleSubmits extends React.Component {
state = {
value: undefined
};
setValue = value => this.setState({ value: value });
render() {
return (
<Form>
Are you over 18 years old?
<Field
name="adult"
component="input"
type="hidden"
value={this.state.value}
/>
<button type="submit" onClick={() => this.setValue(true)}>
Yes
</button>
<button type="submit" onClick={() => this.setValue(false)}>
No
</button>
</Form>
);
}
}
However, that doesn't seem to work -- probably because the value property on the <Field> component is only used for checkboxes and radio buttons.
Can someone give me a nudge in the right direction, for how to solve this properly?
Here's a Sandbox that shows how.
I am trying to change the "asp-action= ", unfortunately I could not find anything on the internet...
Currently I am working with a ViewBag where I can select a value from that list.
What I want is: I want to put that selected value from the ViewBag in the "asp-action= ( here ) "
Image of my index
Image of my Post method
<form method="post" enctype="multipart/form-data" asp-controller="Parser" asp-action= "PostDrone">
<div class="col-md-10">
<p>Upload one or more files using this form:</p>
<select asp-items="#(new SelectList(#ViewBag.listofitems ))"></select>
<input type="file" name="files" multiple />
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<input type="submit" value="Upload" />
</div>
</div>
For example:
I want the "asp-action=" have the string value "PostSchoen" if I selected PostSchoen from the viewbag selectlist
I hope it is understandable what i said
What you wants to do it should doing by client side development with JS
But you have three ways:
1) You can change it by using JS
here an example with Jquery
need add it to onReady function this will change action to option val
<script>
$(function() {
$("select").change(function (){
//set form action to option val or get to whatever you need
$(this).closest("form").attr("action",$(this).val());
});
});
</script>
2) Send data to one contoller method then switch it by your select or other options
change in view
<select name="typeOfUploading" asp-items="#(new
SelectList(#ViewBag.listofitems ))"></select>
change in controller
PostDrone(List<IFromFile> files, string typeOfUploading)
{
//and use typeOfUploading this will be selected value from your select list
}
3) Firstly provide for user this data send choise, that generate him correct view with needed action
I'm using md-checkbox in a FormArray.
private protocolArray: FormArray = new FormArray([
new FormControl('tcp'),
new FormControl('udp')
]);
<div class="form-group" formArrayName="protocol">
<md-checkbox formControlName="0" [checked]="true">TCP</md-checkbox>
<md-checkbox formControlName="1" [checked]="false">UDP</md-checkbox>
</div>
When it renders both are checked by default. If I get rid of the md-checkbox and make it a normal input type="checkbox" things render perfectly.
What gives?
I discovered that FormArray only takes boolean values so by instantianting it with 'tcp' or 'udp' it type casted them to true. I had to tweak my code to work around it, but creating the array with true or false fixed it.
Final code:
private protocolArray: FormArray = new FormArray([
new FormControl(true),
new FormControl(false)
]);
<div class="form-group" formArrayName="protocol">
<md-checkbox formControlName="0" >TCP</md-checkbox>
<md-checkbox formControlName="1" >UDP</md-checkbox>
</div>