Im new to react, Im acheiving to search the text,which will post to the api, and the results will be displayed as options in box,for which im using twitter bootstrap just the className's to match with REACT.I want to make the make the option's value to be bind to the input text box above, if i select the option. How to achieve this using useRef and at the same time ,the select box should close if the option is selected.The HandleCHange for the input box triggers the api call for every keystrole
Below is the code for the select box.
<input
className='form-control'
placeholder='Search Drug...'
onChange={handleChange}
/>
<select class='custom-select' size={drugList.drugs?.length> 0 ? '10' : ''} onChange={handleSelectChange}>
{drugList.drugs?.length > 0 &&
drugList.drugs.map((each,index) => {
return (
<option key={index} value={`${each.drug}`}>
{each.drug}
</option>
)
})}
</select>
Here i want the selected value to be bind to the input box.It will be great if you give the sample code or snippet.
Please refer the image above.Thanks in Advance!
I want to make the make the option's value to be bind to the input text box above
---> use component state to store the selected value from the options dropdown
at the same time ,the select box should close if the option is selected.
----> hide/display select options based on input box focus by toggling component state.
created a sandbox for your app, please check
I think you can do this like this.
handleSelectChange = (event) =>{
this.setState({selectvalue:event.target.value});
}
handleChange= (event) =>{
this.setState({selectvalue:event.target.value});
---- and your code here---
}
<input
className='form-control'
placeholder='Search Drug...'
onChange={this.handleChange}
value={this.state.selectvalue}
/>
<select class='custom-select' size={drugList.drugs?.length> 0 ? '10' : ''} onChange={this.handleSelectChange}>
{drugList.drugs?.length > 0 &&
drugList.drugs.map((each,index) => {
return (
<option key={index} value={`${each.drug}`}>
{each.drug}
</option>
)
})}
</select>
Related
I have this function that allows me to get the ID of the value that was selected in the form.
<Field
component="select"
name="account_rep_id"
className="form-control"
>
<option key={0} value={0}>
All
</option>
{accountReps.map(function(list) {
return (
<option
key={"accountReps_" + list.id}
value={list.id}
>
{list.rep_full_name}
</option>
);
})}
</Field>
accountReps is just the a list of names.
When I
mapPropsToValues({reducer)
account_rep_id: reducer.report.account_rep_id,
I get the id export and everything is fine, what id like to do is to also be able to get the text value that was selected and somehow also export it so I can use that when I later.
I'm making a form and I want the user to see an input field when they select "Others" in the dropdown.
I'm fairly new to React and was trying to get the value itself from the input field, but it's not working.
<FormItem>
<h4 className={ 'register_form_title'}><span className={ "red_astrick_sign"}>*</span>Entity type</h4>
<Select placeholder="Type of entity" onChange={value=> setFieldValue('organisation_type', Number(value))} name="organisation_attributes.organisation_type">
<Option value="1">Public Limited Company</Option>
<Option value="2">Private Limited Company</Option>
<Option value="3">One Person Company</Option>
<Option value="4">Limited Liability Partnership</Option>
<Option value="5">Partnership Firm</Option>
<Option value="6">Sole Proprietorship</Option>
<Option value="0">Others</Option>
</Select>
</FormItem>
This is a simple dropdown which converts the chosen value to a number, so the output of the code will be {"organisation_type":<value>}. But if they select "Others", the input field should determine the <value>.
Use state to store the current value of the drop-down and visibility of input-field.
Inside the onChange handler, only set current value with the transformation when the value is not O(for Others) and set input-visibility to false. But, when it is 0, set input-visibility to true.
Inside the onChange of input field, set current value as would do.
Use a state variable to track visibility of input field.
constructor(props) {
super(props);
this.state = {show_input_field: false}
}
In your onChange attribute, check if the value is 0, setState of show_input_field to true, else false, hence showing/hiding the input field.
Using the same name attribute lets you save value in the desired 'organisation_attributes.organisation_type': <value> pair.
render() {
const {show_input_field} = this.state;
...
<Select placeholder="Type of entity" onChange={value => {
setFieldValue('organisation_attributes.organisation_type', Number(value));
if (value === 0)
this.setState({show_input_field: true});
else
this.setState({show_input_field: false});
}} name="organisation_attributes.organisation_type">
</Select>
{show_input_field ? <Input name="organisation_attributes.organisation_type" onChange={handleChange}/> : ""}
...
}
Hope this helps.
I'm looking for a good way to create multi select dropdowns in plain React, without using an additional library.
At present, I’m doing something like this:
<select className='yearlymeeting' multiple={true}>
<option value=''>Yearly Meeting</option>
{
this.state.meeting.yearly_meeting.map((m: Meeting, i: number) => {
return (
<option
value={m.title}
key={i}
selected={this.state.selectedTitles.yearlyMeetingTitles.includes(m.title) ? true : false}>
{m.title}
</option>
);
})
}
</select>
This code "works", but I'm getting this warning:
Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.
From react docs -
You can pass an array into the value attribute, allowing you to select multiple options in a select tag:
<select multiple={true} value={['B', 'C']}>
I think you just need to pass your selected items array to value prop of select element.
Instead of checking conditions and setting "selected" props in the "option" element, directly set the value in the "select" element. The warning should go away.
<select className='yearlymeeting' multiple={true}
value={this.state.selectedTitles.yearlyMeetingTitles}>
<option value=''>Yearly Meeting</option>
{
this.state.meeting.yearly_meeting.map((m: Meeting, i: number) => {
return (
<option
value={m.title}
key={i}
{m.title}
</option>
);
})
}
</select>
I am new to reactjs. I am trying to use multi select using form control.
Below is my code:
handleIds(e){
let id = null;
if(e.target.value) {
id = parseInt(e.target.value, 10);
} else {
id = null
}
this.state.Ids.push(id);
}
<FormGroup controlId="formQueryIds"
validationState = {this.validateNotEmpty(this.state.queryIds)}>
<ControlLabel>Query Ids</ControlLabel>
{this.loadQueries()}
<FormControl componentClass="select"
placeholder="Select ids"
onChange={this.handleIds}
multiple>
{this.state.items.map((item) => <option key={item.id}>{item.id}</option>)}
</FormControl>
<FormControl.Feedback />
</FormGroup>
Here items is an array of ids which is dynamically providing the option values.
The problem here is: for every single selection of option, it's triggering handleIds and adding the value to the array Ids[].
But when we unselect the option which we selected already, I am unable to trigger handleIds and remove the value from the array.
Is there a way to design to remove value from the array as soon it's unselected or instead of triggering handleIds for every selection, just triggering once and provide all the selected values as an array?
I have a Field which I want to hide based on the value of another Field. For this I am right now using the warn props as I can get the current value as well as the values of other fields in the form.
Is it possible to create custom props ( similar to warn and validate) that can take the current field's value and all the values of the form as arguments?
What are other approaches I can do to hide/show a field based on value of another field using redux-form?
You can use Fields component for this. It handles the state of various fields under a single component.
Example:
// outside your render() method
const renderFields = (fields) => (
<div>
<div className="input-row">
<label>Category:</label>
<select {...fields.category.input}>
<option value="foo">Some option</option>
</select>
</div>
{ fields.category.input.value && (
<div className="input-row">
<label>Sub category</label>
<select {...fields.subcategory.input}>
<option value="foo">Some other option</option>
</select>
</div>
)}
</div>
)
// inside your render() method
<Fields names={[ 'category', 'subcategory' ]} component={renderFields}/>