Я недавно выучил React. Я просто сталкиваюсь со сценарием, в котором у меня есть форма (Parent) и в которой у меня есть маленькая модальная форма.
Теперь возникает проблема: когда я отправляю модальную форму (дочернюю), родительская форма также отправляется?
В чем проблема? ) Я использую Redux Form обеих форм.)
Родительская форма:
class AddClientContent extends Component {
constructor(props) {
super(props);
this.state = {
show_branch: false,
success_message: false,
existed_error: '',
other_details: false,
address_active: true,
contactPerson_active: false,
remarks_active: false,
image_validation_error: false,
pincodeError: '',
work_phone_number_error:'',
mobile_number_error:'',
website_error:'',
facebook_error:'',
image:null,
image_validation_error: false,
checked:false,
isOpen:false,
};
}
submit = (values) => {
}
render() {
return (
<Fragment>
<div className="col-sm-12">
<form className="row" onSubmit={handleSubmit(this.submit)}>
<div className="col-md-6">
<div className="col-md-6 full-height-8">
<div className="row">
<div className="userMail-grid-tabbx">
<ul className="nav nav-tabs" id="myTab" role="tablist">
<li className="nav-item">
<a className={this.state.other_details?"nav-link active show":"nav-link"} onClick={this.clickedOtherDetails} id="otherdetail-tab" data-toggle="tab" href="#otherdetail" role="tab" aria-controls="otherdetail" aria-selected="true">Other Details
</a>
</li>
<li className="nav-item">
<a className={this.state.address_active?"nav-link active show":"nav-link"} id="address-tab" onClick={this.clickedAddress} data-toggle="tab" href="#address" role="tab" aria-controls="address" aria-selected="false">Address
{this.state.pincodeError&&<i class="icon-warning-triangle text-danger text-sm"></i>}
</a>
</li>
<li class="nav-item"><a onClick={this.clickedContactPerson} className={this.state.contactPerson?"nav-link active show":"nav-link"} data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact Persons</a></li>
<li class="nav-item"><a onClick={this.clickedRemarksActive} className={this.state.remarks_active?"nav-link active show":"nav-link"} data-toggle="tab" href="#remarks" role="tab" aria-controls="remarks" aria-selected="false">Remarks</a></li>
</ul>
<div className="tab-content" id="myTabContent">
<div className={this.state.other_details?"tab-pane userMail-tab fade show active":"tab-pane userMail-tab fade"} id="otherdetail" role="tabpanel" aria-labelledby="otherdetail-tab">
<div className="row">
<div className="col-md-12 mb-2">
<label className="text-light-grey" htmlFor="id_currency">Currency</label>
<Field type="text"
name="currency"
component={renderFieldSelect}
options={Currency}
label="Currency"
/>
</div>
<div className="col-md-7 mb-2 ">
<label className="text-light-grey" htmlFor="id_payment_terms">Payment terms</label>
{/* <select name="payment_terms" className="input-control" id="id_payment_terms">
<option value="" defaultValue="">Select Payment Terms</option>
</select> */}
<Field type="text"
name="payment_terms"
component={renderFieldSelect}
options={PaymentTerms}
label="Payment Terms"
/>
</div>
{/* <div className="col-md-5 mb-2 align-self-end">
<button type="button" className="btn btn-outline-primary btn-block" data-toggle="modal" data-target="#paymentTermsModal">
<i className="icon-settings"></i> Configure Terms
</button>
</div> */}
<div className="col-md-12 mb-2 mt-1">
<label className="text-light-grey" htmlFor="id_enable_portal">Enable Portal ?
<button className="btn btn-link-grey p-0" role="button" data-toggle="popover" data-placement="bottom" data-trigger="focus" title="Enable Portal ?" data-content="And here's some amazing content. It's very engaging. Right?">
<i className="icon-warning-circle" style={{ verticalAlign: "middle" }}></i>
</button>
</label>
<p>
<span className="checkbox-cs mr-2">
<label> <input type="checkbox" onChange={this.toggleEnablePortalModal}name="enable_portal" id="id_enable_portal" />
<span className="check-input mr-2"><i className="icon-checked icon-tick"></i></span>
Allow portal access for this contact
</label>
</span>
<span className="text-muted">( Email address is mandatory )</span>
</p>
</div>
{(this.state.isOpen && (this.state.checked)) && <AddClient {...this.props} onCloseModal={this.toggleEnablePortalModal}/> }
<div className="col-md-12 mb-2 mt-1">
<label className="text-light-grey" htmlFor="id_portal_language">Portal language
<button className="btn btn-link-grey p-0" role="button" data-toggle="popover" data-placement="bottom" data-trigger="focus" title="Portal Language" data-content="And here's some amazing content. It's very engaging. Right?">
<i className="icon-warning-circle" style={{ verticalAlign: "middle" }}></i>
</button>
</label>
<Field
name="portal_language"
component={renderFieldSelect}
label="Portal Language"
/>
</div>
<div className="col-sm-6 form-group">
<label className="text-light-grey" htmlFor="id_facebook">Facebook </label>
<Field type="text"
name="facebook"
component={renderField}
onChange={()=>this.clearExistedError('facebook')}
facebook_error={this.state.facebook_error}
validate={websiteValiadtion}
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button className="d-none" id="submit-btn" type='submit'>Submit</button>
</form>
</div>
</Fragment>
)
}
}
AddClientContent = reduxForm({
form: 'addClientform'
})(AddClientContent)
export default AddClientContent
Дочерняя форма:
class AddClient extends Component {
constructor(props) {
super(props);
this.state = {show_branch: false,existed_error:''};
}
show_branch=()=>{
this.setState({show_branch:true})
}
hide_branch=()=>{
this.setState({show_branch:false})
}
componentDidUpdate(prevProps){
if(this.props.edit&&(this.props.departmentlist!=prevProps.departmentlist)){
this.props.departmentlist&&this.props.departmentlist.error&&this.props.departmentlist.error.data&&this.props.departmentlist.error.data.non_field_errors&&
this.props.departmentlist.error.data.non_field_errors[0]==='The fields department_name, organization, branch must make a unique set.'&&
this.setState({existed_error:'Department Name already exists'})
}
else{
if((this.props.department!=prevProps.department)){
this.props.department&&this.props.department.departmentCreateError&&this.props.department.departmentCreateError.data&&this.props.department.departmentCreateError.data.non_field_errors&&
this.props.department.departmentCreateError.data.non_field_errors[0]==='The fields department_name, organization, branch must make a unique set.'&&
this.setState({existed_error:'Department Name already exists'})
}
}
}
submit = (values) => {
if(this.props.edit){
if(values.owner_type ==="organization"){
values.branch=''
}else{
values.branch=values.branch_id
}
// let hasbranch = 'branch_id' in values
// if (!hasbranch){
// values.branch=''
// }
this.props.editDepartment(values,this.props.department_obj.slug)
}
else{
this.props.createDepartments(values)
}
}
componentDidMount(){
document.body.classList.add(MODAL_OPEN_CLASS);
if(this.props.edit){
let data={};
data.department_name=this.props.department_obj.department_name;
data.description=this.props.department_obj.description;
if(this.props.department_obj.branch===null){
data.owner_type="organization";
}
else{
data.owner_type="branch";
data.branch_id=this.props.department_obj.branch;
this.setState({show_branch:true});
}
this.props.edit && this.props.initialize(data);
}
else{
this.props.initialize({owner_type:'organization'})
}
}
componentWillUnmount() {
document.body.classList.remove(MODAL_OPEN_CLASS);
}
clearExistedError =() =>{
this.setState({existed_error:''})
}
render() {
if(this.props.department && this.props.department.status==='success'){
return <Redirect to='/organization/organization/' />
}
const { handleSubmit } = this.props
return (
<Fragment>
<div id="modal-block">
<div className="modal form-modal show" id="addDepartmentModal" role="dialog" style={{display: 'block', paddingLeft: '15px'}}>
<div className="modal-dialog modal-lg">
<div className="modal-content">
<div className="modal-header">
<h4 className="modal-title">Enable Portal Access</h4>
<button type="button" onClick={this.props.onCloseModal} className="btn btn-close btn-black" data-dismiss="modal"><span aria-hidden="true">×</span></button>
</div>
<div className="modal-body">
<form id="add-department-form" className="popup-form" onSubmit={handleSubmit(this.submit)} noValidate>
{/* {(this.props.branches&&this.props.branches.data&&this.props.branches.data.length>0)?
<div className="form-group row">
<div className="col-md-4" />
<div className="col-md-8">
<label>
<Field name="owner_type" component={renderRadioField} type="radio" value="organization" onChange={this.hide_branch} />{' '}
Add for {this.props.organization.organization_data.organization_name}
</label><br/>
<label>
<Field name="owner_type" component={renderRadioField} type="radio" value="branch" onChange={this.show_branch}/>{' '}
Add for Branch
</label>
</div>
</div> : */}
<div className="form-group row">
<div className="col-md-4">
<label className="form-control-label" htmlFor="id_department_name">
<label htmlFor="id_department_name"> Name</label></label>
<span className="text-danger">*</span>
</div>
<div className="col-md-8">
<Field type="text"
name="department_name"
component={renderField}
onChange={this.clearExistedError}
existed={this.state.existed_error}
label="Name"
validate={[required,alphabetOnly]}/>
<div className="error-message text-danger">
</div>
</div>
</div>
<div className="form-group row">
<div className="col-md-4">
<label className="form-control-label" htmlFor="id_description">
<label htmlFor="id_description">Email Address</label></label>
</div>
<div className="col-md-8 ">
<Field type="text"
name="description"
cols="40" rows="10"
component={renderField}
className="input-control input-control"
placeholder="Email Address" />
</div>
</div>
<div className="form-group row">
<div className="col-md-4">
<label className="form-control-label" htmlFor="id_description">
<label htmlFor="id_description">Portal Password</label></label>
</div>
<div className="col-md-8 ">
<Field type="text"
name="description"
cols="40" rows="10"
component={renderField}
className="input-control input-control"
placeholder="Portal password" />
</div>
</div>
</form>
</div>
<div className="modal-footer">
<input type="submit" form="add-department-form" className="btn width btn-success" defaultValue="SAVE" />
<button type="button" onClick={this.props.onCloseModal} className="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div className="modal-backdrop show"></div>
</Fragment>)
}
}
AddClient = reduxForm({
form:'addClientModalform'
})(AddClient)
export default AddClient