I have a component that dynamically builds check boxes, from the result of an API call.
I am selecting the first radio button in a group, as a default, when the component is created.
Based on what radio button is checked/selected the page displays differently. So the radio button is selected after the page loads, but the onChange function does not get fired to display the page correctly. I am looking for a way to fire the onChange event after loading, API fetch, and displaying the radio buttons.
Thanks you helped me figure it out. In the final line of my useEffect hook, I click the first radio button in the group. That both sets the default and fires the change event. I tried setting it to check but that did not fire the change event.
useEffect(() => {
.
.
document.getElementsByName('rbImageGroup')[1].click();
}, []);
Related
I need to fire onBlur event for p-dropdown. I need this to be fired only when the dropdown looses focus. But its firing onBlur event even when I click on dropdown. I know there is 'onSelect' event but I cant use that.
My requirement is, User can either select a dropdown value or can enter any text which is not in dropdown. I need to save the info into DB.
I tried putting a settime but its not working out.
I have a component that uses onClick and onFocus. Both of the events call the same function that loads data from an API.
When the user is tabbing through elements on the page and lands upon this component's child textarea, onFocus runs and loads data from an API.
However, when the user clicks on the component's textarea child, both the onClick and onFocus events try and load data from the API. I want to prevent both events from firing a function twice.
I do NOT want to put events on the text area itself if possible.
function DataRow(props) {
function focused(e){
props.loadDataFromAPI(); /* This will get ran twice if clicked on tr element's textarea */
}
return <tr onFocus={focused} onClick={focused} ><textarea></textarea></tr>;
}
As you can see, I want it to get called when the user clicks on the tr as well as clicks/focuses on the textarea. I just don't want that duplicate call when clicking on the textarea!
Maybe you can implement a debounce system to avoid this behaviour.
In this way not only you will avoid this double event firing, but you will prevent user to spam you and polling request if he starts to repeatedly click on the button.
There are a lot of answers out there about debouncing, maybe you can give a look at lodash debounce, or google for specific React systems like debounce hooks.
I have a Dropdown, I select a value, lets say "myName", then I have a button that I click and it will display a form to fill with "myName" in one of the fields. But there is a UI issue. When I click that form button it display the form but the Dropdown selected item will disappear.
I tried debugging and it seems there is an issue when rendering it for second time. it fails in a function called commitRoot(root, finishedWork); in react-dom.js file and I don't know what it means as i'm very new in this area.
render() {
return (
<Dropdown
className='titlebar__dropdown'
options={this.myOptions}
onChange={this.selectedNameChanged}
selectedKey={PlanSelector.selectedName}
placeholder='Select a Plan'
/>
before clicking the form:
After clicking, and it doesn't show the options anymore:
You are probably overwriting the state of the property holding the value of the dropdown.
Make sure it is not again set to "" as you must have kept.
On the click of the button, the state is changed and as a result, render() is ran again because of which it is getting overwritten make sure to hold your state when the button is clicked and check if you are changing the state of selectedNameChanged property.
Hopefully, this helps,if not can you please provide the method which is called on button click.
Thanks
I have a redux form with a submit button and a normal html button. I dont want the form to be validated when the normal button is pressed. But looks like the form is always validated once and then when I click the button again the onclick on the button is executed. How do I prevent this?
I replicated the same issue with same form. For example if you go to http://redux-form.com/6.4.3/examples/syncValidation/ ,enter 4 in the age field and click on clear values. First time the validation triggers and stops the button action. Second time the button action works i.e, the form values are cleared..
The example you link to has that behavior because by default Redux Form will call the validation function for touched Fields on a blur event. The fact that you are clicking a button is irrelevant - you could click on any element or anywhere on the page and you would get that behavior.
The only real way to stop this behavior is to stop Redux Form from touching your Fields on a blur event. You can do this by setting touchOnBlur to false in the Redux Form config object.
export default reduxForm({ form: 'myForm', touchOnBlur: false })(MyForm);
Please Add type="button" to prevent the button from submitting the form.If you don't give any type it will consider submit.
I've added a simple form with one input and a save button. The save function is called and works as expected.
But I now want to add a boolean to disabled logic on the save button. So in my current page I have a state called email which I want to disable the button if this is empty.
What I did try is the following, passing {!this.state.email} into the disabled property of the button but it doesn't disable the save button. Similar to this example:
<Button primary={true} disabled={!this.state.email} onClick={this._onSave}>Save</Button>
I also logged the value in the _onBlur method and I can see that email state is being populated.
Question:
How can you bind component state to button disabled property?
This is a gist of my current component:
http://hastebin.com/jufahijoza.js
Look at my comments for an explanation.
_onBlur(event) {
//if(true or false)
// this.refs.myInputButton theres your button now disable/enable it with javascript
this.props.setUserEmail(event.target.value);
console.log(this.state.email);
}