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);
}
Related
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();
}, []);
I'm checking this example in react-hook-form doc: https://codesandbox.io/s/react-hook-form-v6-controller-qsd8r?file=/src/index.js
Weird thing is that the button doesn't have type="submit". But it still triggers submit event after clicking. (Screenshot attached below.)
How does it know which button is the submit button?
If a button is inside a form, then by default it is given the submit type, unless you give it another type.
So the Reset button in that codesandbox has type="button" to prevent it triggering the event, but the Submit button leaves it blank, so it submits by default.
Reference: Moz Docs
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 have a form with a save, clear and reload button. The clear button works by clearing the form, using the reset method. But on clicking, the reload button, the form should be loaded back with the data that was typed in the form before clicking the clear button. So, how could this be done? Thanks in advance.
Check out loadRecord() method:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-method-loadRecord
Take a look at the form's getValues() and setValues() methods. When the clear button is clicked, you can use var oldValues = form.getValues() to store the current field values. Then when the reload button is clicked, you can restore the values via form.setValues(oldValues).