I am fairly new to react, but I am trying to create a dropdown with ant-design with some of the individual options disabled based on certain IDs.All the ID data returns as expected, however, the disable logic (which I think should work) in the disable attribute seems to disable every option in the dropdown. Anyone know what could be going on?
<Select
value={this.props.value}
name={this.props.name}
className={this.props.cssClass}
disabled={this.props.disabled}
onChange={this.props.onChange}
mode="multiple"
showSearch
filterOption={(input, option) => option.props.children.toLowerCase()
.indexOf(input.toLowerCase()) >= 0}
size="large"
>
{
this.state.data.map(opt => (
<Option
disabled={this.props.multiSelect.filter(data => data.DivisionId !== opt.Id)}
key={opt.Id}
value={opt.Id}
>
{opt.Name}
</Option>
))
}
</Select>
Issue with your code is that array filter method will always return true because empty array is parsed as true.
Replace filter method with find method.
Related
I want to set a default value (reason) on the dropdown that depends wether refundDateInput inputs has been filled.
What I currently have is:
A watch to get refundDateInput:
const refundDateInput = Form.useWatch('refundDate', form);
A conditional initialValue that depends on refundDateInput:
<Form
layout="vertical"
form={form}
onFinish={submit}
initialValues={{
reason: refundDateInput && refund,
}}
onValuesChange={() => {
validate();
}}
>
And then the actual dropdown:
<Select
disabled={watchInputFields()}
data-testid="select-reason-id"
placeholder="Select"
className={styles.fullWidth}
allowClear
dropdownMatchSelectWidth={false}
>
{Object.keys(Reason).map((key) => (
<Option data-testid="select-option-id" key={key} value={key}>
{Reason[key]}
</Option>
))}
</Select>
The conditional initalValue is not doing anything cause, well, is not initial anymore.
I need that reason to be selected if refundDate is been filled, but also, be able to change to another reason if necessary.
I am working on a dropdown select filter and there is a reset button, so I want to reset data whenever I click on it.
this is my select dropdown where I am filtering data
<select
className={style.input}
name="categoryId"
onChange={e => handleCategory(e.target.value)}
>
<option value="" disabled selected>
Select A Categtory
</option>
{props.category_list && props.category_list.length > 0
? props.category_list.map((item, index) => (
<option value={item.categoryId}>{item.categoryName}</option>
))
: null}
</select>
this is onChange method of select
const handleCategory = (value) => {
setErrorMsg(null);
setCategoryID(value);
props.getSubCategoryList(value);
};
and this is a reset button, I tried to make
const handleReset = (value) => {
setReset(true);
setCategoryID('');
setSkillID('');
setLocationId('');
props.getSubCategoryList(1);
};
but the problem is when I click on reset it resets, but the value doesn't change to default one in options also if I change it in {item.categoryName} then three same values appear under options. hope this information is enough.
You need to bind the selected value to select element.
Provide categoryID as a prop to your component.
Set it as the value property of select.
<select
...
...
value={props.categoryID}
onChange={e => handleCategory(e.target.value)}
></select>
My code is working when a user selects any of the options.
However, when they select the 'now' option and then change their mind and select the 'specific' option, React crashes without displaying an error - it just shows a white screen.
This problem doesn't occur when the options are selected the other way round - when 'specific' is selected and the user changes their mind and selects 'now'.
When 'specific' is selected a new input is rendered.
A simplified version of the code is below:
render() {
let startSelling = values.tickets.map((e,i) => {
if(e.startSelling == 'specific'){
return(
<div>
<DatePicker
className="datePicker"
timeIntervals={15}
onChange={event => this.props.setSpecificTime(event, i, 'startSellingTime', values)}
selected={values.tickets[i].startSellingTime}
placeholderText='Select Date And Time'
showTimeSelect
dateFormat="Pp"
/>
</div>
)
}else{return <div></div>}
})
return (
<>
{this.state.tickets.map((e, i) => {
return (
<div>
<div>
<select
value={values.tickets[i].startSelling}
onChange={event => this.props.changeSellingTimes(event, i, 'startSelling', 'startSellingTime', values)}
>
<option value='' disabled>Start Selling Tickets</option>
<option value="now">Now</option>
<option value="specific">Specific Date and Time</option>
{i===1 ? <option value="whenPreviousSoldOut">When {values.tickets[0].ticketType} Is Sold Out</option>:<option value="whenPreviousSoldOut" disabled={i==0}>When A Previous Ticket Is Sold Out</option>}
</select>
</div>
{startSelling[i]}
</div>
)
})}
</>
)
}
Where am I going wrong?
Found it. Selecting 'now' was saving a date as a moment object in state. Datepicker caused react to crash when it tried to read it.
I want to change initial value of select when ever user selects option.
To be more precise, I have many options to select and by default I want display "All" and whenever user selects another option(s) "All" option should disappear.
What I have done : I have tried to render initialValue conitionally whenever user selects option
<Form.Item label="Компьютеры">
{getFieldDecorator("computers", {
initialValue: this.props.status ? null : "All",
})(
<Select
mode="multiple"
onChange={this.handleCompChange}
>
{this.props.comps.map(comp => (
<Option value={comp.key} key={comp.key}>
{comp.name}
</Option>
))}
</Select>
)}
</Form.Item>
You can't dynamically change the initialValue unless your unmount the Form.Item.
I am looping through an array of objects that return option inside a select tag. As far as I know, I can't attach event handler on the option tag, so I attached onChange handler on select tag. I can get the value of option tag by default, but as I am looping array of objects, I want to get some other values of the object as well. How do I achieve that?.
Here's the snippet of what I am doing,
<select onChange={handleChange}>
{data.map(item => {
return (
<option key={item.id} value={item.name}>
{item.name}
</option>
);
})}
</select>
How do I get for example item.age and item.address when onChange get invoked ?
I find the solution, I set the value of option tag as an object, stringify it using JSON.stringify() so I can get the whole object, and then just read it with JSON.parse()
<select onChange={handleChange}>
{data.map(item => {
return (
<option key={item.id} value={JSON.stringify(item)}>
{item.name}
</option>
);
})}
</select>