I'm using the 'react-md' library and I am trying to use the SelectField component, but when I send a function for onChange the select field no longer updates as it's supposed to.
handleSelection = (value, index, event, details) => {
// "details.id" is the id of the field which I am using to keep track of state
this.setState({[details.id]: value});
}
render() {
const STRING_SELECTORS = ['At most', 'At least'];
return(
<div>
<SelectField
id="calories-selector"
className="md-cell selector md-cell--5"
menuItems={STRING_SELECTORS}
defaultValue="At most"
onChange={this.handleSelection)
/>
)
}
When I don't call this.setState() in the handleSelection function, the menu changes as expected when clicking an item, however when I do call setState, it updates the selection on a delay. If the menu says "At most" and I click "At least" it will stay at "At most" then if I click "At most" it will then change the "At least".
I've had a similar issue with input fields, and to solve this I used onBlur instead of onChange, but the react-md library's onBlur doesn't get triggered in the way that I need.
You can use the value prop of SelectField component. Create a state and bind it to the SelectField value prop and update the state at onChange event to the selected value.
Related
I have a form with state handled in a context. within the form I have a checkbox component which I am trying to have its state handled within the context. So when I submit the form the checkbox returns a Boolean whether it is checked or not. I'm having trouble with the event handler triggering the checkbox.
I have a number of textfields in the form which are behaving as expected and their values can be seen in the Db once the form is submitted.
Within the checkbox component the actual input is hidden for styling purposes. So the user will be clicking on the label(which is styled to look like a checkbox) or a secondary label (acting as a label)
I'd like it so that when a user clicks on either of the labels the checkbox is triggered. I had the onClick on the checkbox input but seeing as it's display is hidden the user cannot trigger the event.
If I put the onClick on either of the labels or a parent element my onChange functions e.target is pointing to the wrong location.
Is there a way to pass in the the input as the e.target? if the onClick event is on the outer div?
onChange (within RecordForm.js)
const onChange = (e) => {
setRecord({ ...record, [e.target.name]: e.target.value });
};
Checkbox.js
const CheckBox2 = ({ value, label, name, onChange }) => {
return (
<CheckBoxContainer onClick={onChange}>
<LabelContainer>
<CheckboxInput
type='checkbox'
value={value}
name={name}
/>
<CheckBoxLabel>
<Tick className='Tick' />
</CheckBoxLabel>
</LabelContainer>
<VisibleLabel>{label}</VisibleLabel>
</CheckBoxContainer>
);
};
export default CheckBox2;
In my render method i render some cards that all have button and when i click on the button i want to disabled them.
Those buttons are checking if the value of the array is true and if it is it's disabling the button but this is only working when i refresh the page and i want the button to be disabled directly on click
Here is my try
//this is checking from my database if it include the id of the pokemon that i want to get
const check = pokemon.id
const newPoke = getPokemon.includes(check);
// Here is the button that is getting disabled only if newPoke return true
<Button isDisabled={newPoke}/>
Everything work correctly when i refresh the page the buttons that i clicked previously get disabled but not onClick directly.
I think after i click i have to re-check for newPoke but i'm not sure how to include it in the button
You are using props to pass variable from parent to children(Button).
reactjs documentation states react props are read-only
If you are planing to change the values of newPoke then you should rethink your structure and maybe its best to use states in your example
For example here
<Button isDisabled="newPoke"></Button will only be checked at initialization stage since its a react prop. but if you used state which gets updated with every new action you can have a true one-way binding and your ui would reflect data changes quickly
store the newPoke in state and change it's value when the button is clicked. and use that value in button isDisabled prop. try something like this
state={
isDisabled: false;
}
handleClick=(isDisabled)=>{
this.setState({isDisabled});
}
//this is checking from my database if it include the id of the pokemon that i want to get
const check = pokemon.id
const newPoke = getPokemon.includes(check);
// Here is the button that is getting disabled only if newPoke return true
return(
<Button isDisabled={this.state.isDisabled} onClick={()=>this.handleClick(newPoke )}/>
);
i think if you want get value from database you can use componentDidMount().
and your value you can save while in state. and then in function handleClick you can change this state
for example :
handleClick = () => {
const value = this.state.valueFromDataBase
this setState({valueFromDataBase: false})
}
and in render you declare this value state
render(){
return(
<Button defaultValue={this.state.valueFromDataBase} onCLick={this.handleClick} />
)
}
please correct my answer if I am wrong in responding to your question
In my program, if user select items in dropdown, the onchange event will trigger api call to autofill the rest of fields. But if user add its own item in dropdown, I need to distinguish it and do my onchange event a little differently.
But it seems like the onchange event props don't give out any info on whether this selection (the value field) is an addition. The onAddItem function happens after onchange so it won't help either. What should I do?
The onChange event doesn't currently indicate if the value is new, but you can easily determine that by looping through the options.
dropwDownChangeHandler(event, data) {
let optionIsExisting = false;
data.options.forEach(option => {
if (option.value === data.value) optionIsExisting = true;
});
console.log(optionIsExisting);
}
I have the following code for radio selection control:
<Radio
inline
id={item}
enter code herename="stackedRadios"
value={item}
label={item}
checked={this.state.checked == item}
onChange={this.handleChange.bind(this, item, quesId)}
/>
The handle change function is :
handleChange (value, quesId) {
this.setState({checked: value})
}
In the handle change function what I am trying to print the value on console but nothing is printed on console.
Now what I want is to get the selected value from the radio but failing to get so. Please help with the same.
Since you've used bind with 2 args, event which is normally the first arg, will be the third.
handleChange (value, quesId, event) {
this.setState({ checked: event.target.checked })
}
If you don't need the first two values then don't bind. Also you shouldn't use bind inside of render as this causes the Radio component to have new props every render even if nothing changed, since a new function is created every render.
As in the question title, I am not able to mark the checkbox as selected, on onChange event of the selectbox like this,
<select id='featuresType'
onChange={this.handleChange.bind(this, 'type')} >
{this.getOptions(featuresType)}
</select>
were as the handleChange is like :
handleChange: function (field, e) {
if (field == 'type') {
let selected = e.target.value;
this.setState({typeSelected: selected})
}
/*Why the console is taking the previous selecte option, ex: if Locker is selectec below lone prints 'dc' */
console.log(field ,',', this.state.typeSelected)
},
when it is bind to defaultValue,
defaultChecked={(this.state.typeSelected =='locker')}
The select box is not able to mark wrt the condition given, but manually could able to mark checked/notchecked.
checked={(this.state.typeSelected =='locker')}
On this checked attribute, the checkbox is able to mark as checked, based on select box option value. BUT in this case the manual way of checking or
un-checking is not happening.
Hope you guys got my problem
Here is the JSFiddle
I wanted the checkbox to act both ways, on select of the option, the checkbox should be checked. And also user can check/Uncheck the checkbox Manully
React Docs says:
setState() does not immediately mutate this.state but creates a
pending state transition. Accessing this.state after calling this
method can potentially return the existing value.
There is no guarantee of synchronous operation of calls to setState
and calls may be batched for performance gains.