What to do if your submit is outside of form?
Example:
<Root>
<Header>
<Button label={'SAVE'} onClick={this.clickHandler}/> // <-- My handler for save form data
<Button label={'DELETE'} />
</Header>
<Form onSubmit={this.handleSubmit} fields={fieldsList} /> // <-- My form
<Root />
Should I be using getValues?
From v4.2.0 you can add a ref prop to your form component and call submit() on that ref. See example at http://redux-form.com/5.3.1/#/examples/submit-from-parent
clickHandler() {
this.refs.myForm.submit()
}
<Root>
<Header>
<Button label={'SAVE'} onClick={this.clickHandler}/>
<Button label={'DELETE'} />
</Header>
<Form ref="myForm" fields={fieldsList} />
</Root>
Related
I have two forms: edit and new. They have different headers and a different set of buttons.
I always get bogged down in style. Which is preferred and why? Examples are showing edit form.
// inside FormImpl we look at mode to display a different header.
// inside FromImpl we look for the presence of onCancelEdit to show the cancel button.
<Form
render={form => (
<FormImpl form={form} mode="edit" onCancelEdit={handleCancelEdit} />
)}
/>
// header is controlled outside the form
// buttons and header live outside FormImpl
// formId is passed to the <form /> inside FormImpl
<Form
render={form => (<>
<h2>Edit</h2>
<FormImpl form={form} formId="main" />
<div>
<button for="main" type="submit">Submit</button>
<button onClick={handleCancelEdit}>Cancel</button>
</div>
</>)}
/>
// header is controlled outside the form
// slot the buttons, giving FormImpl the responsibility of placing them where needed.
<Form
render={form => (<>
<h2>Edit</h2>
<FormImpl
form={form}
buttons={
<div>
<button type="submit">Submit</button>
<button onClick={handleCancelEdit}>Cancel</button>
</div>
}
</>)}
/>
I've tried all three. This pattern comes up a lot and it's not always clear what to use. I'm using this as a learning exercise.
I am trying to toggle between two images in react and trying to change the Navlink route based on the path enter image description here
<button className="lessonTypeButton">
<img
src={singleLessonsType}
alt="singleLessonsType"
className="packageOne"
onClick={lessonSelected}
/>
</button>
<br />
<br />
<br />
<button className="lessonTypeButton">
<img
src={packageLessons}
alt="packageLessons"
className="packageTwo"
onClick={lessonSelected}
/>
</button>
you can have href property to have routes that in URL,
<button className="lessonTypeButton">
<img
src={packageLessons}
alt="packageLessons"
className="packageTwo"
onClick={lessonSelected}
href={/packageLessons}
/>
</button>
<button className="lessonTypeButton">
<img
src={singleLessonsType}
alt="singleLessonsType"
className="packageOne"
onClick={lessonSelected}
href={/singleLessonsType}
/>
</button>
or use hooks,
import { useHistory } from "react-router-dom";
then use it in function,
let history = useHistory();
function lessonSelected = ()=>{
history.push("/singleLessonsType");
}
or simply call onclick event directly,
<button className="lessonTypeButton">
<img
src={packageLessons}
alt="packageLessons"
className="packageTwo"
onClick={history.push("/packageLessons");}
/>
</button>
<button className="lessonTypeButton">
<img
src={singleLessonsType}
alt="singleLessonsType"
className="packageOne"
onClick={history.push("/singleLessonsType");}
/>
</button>
There is a component
return (
<div className={classNames}>
<img
className={[classes["user__avatar"]]}
alt={props.altAvatar}
src={props.srcAvatar}
/>
<h1 className={[classes["user__name"]]}>{props.userName}</h1>
<Button className={[classes["user__logout"]]} onClick={logOut}>
Logout
</Button>
</div>
I initialize it in another component with such data
<UserProfile
className={[classesAppContainer["app__body"]]}
userName={userProfileName}
alt={userProfileName}
src={userProfilePhoto}
/>
The question is, how do I transfer Alt and Src data not from the outside, but encapsulated?
Need to test the React.createRef() part, but that is passed as a prop to the child component.
return (
<div id="excel">
<BuilderWrapper className="builderWrapper">
<Header name={name} desc={description} exportHandler={this.exportHandler} showData={this.showData} />
<BuilderNotification>
<Message infoMessage={cmsContent.messageOnExcelSheet} />
</BuilderNotification>
<BuilderSpreadsheet>
**<HotTable ref={this.hotTableComponent} {...this.setting} className={headerBoldCustom} />**
</BuilderSpreadsheet>
<HotFooter dimensions={dimensions} />
</BuilderWrapper>
</div>
);
I have a page with bunch of office fabric textField controls. They have their own onGetErrorMessage method to validate and show the error message. But I don't want to fire validation onBlur or onFocusIn. I want to validate all on some 'Save' button click. How can I access the controls and walk through those and fire validation on it at once? The controls are not in tag.
e.g.
<div>
<div>
<TextField label="First Name:" onGetErrorMessage={this._onError} />
</div>
<div>
<TextField label="Last Name:" onGetErrorMessage={this._onError} />
</div>
<div>
<TextField label="Email:" onGetErrorMessage={this._onError} />
</div>
<div>
<TextField label="Username:" onGetErrorMessage={this._onError} />
</div>
<div>
<input type="button" onClick={this.validate()} value="Save" />
</div>
</div>
I tried initializing TextField first and then using it in render() and accessing it in validate() but didn't work. Any ideas how this can be achieved?
Just came across this, but looks like no one answered.
Can be done via a simple event capturing:
validate = () =>{
this.go = true;
}
_onError = () => {
if (!this.go){
return "";
}
}