溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如何在react-antd中彈出層form內容傳遞給父組件？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
子組件：
// jshint esversion:6
import React, { Component } from 'react';
import { Form, Input} from 'antd';
const FormItem = Form.Item;
class Forms extends Component{
getItemsValue = ()=>{ //3、自定義方法，用來傳遞數據（需要在父組件中調用獲取數據）
const values= this.props.form.getFieldsValue(); //4、getFieldsValue：獲取一組輸入控件的值，如不傳入參數，則獲取全部組件的值
return values;
}
render(){
const { form } = this.props;
const { getFieldDecorator } = form; //1、將getFieldDecorator 解構出來，用于和表單進行雙向綁定
return(
<Form layout="vertical">
<FormItem label="姓名">
{getFieldDecorator('name')( //2、getFieldDecorator 的使用方法，這種寫法真的很蛋疼
<Input />
)}
</FormItem>
<FormItem label="年齡">
{getFieldDecorator('age')(
<Input />
)}
</FormItem>
<FormItem label="城市">
{getFieldDecorator('address')(
<Input />
)}
</FormItem>
</Form>
)
}
}
export default Form.create()(Forms); //創建form實例父組件：
import React, { Component } from 'react';
import { Modal } from 'antd';
import Forms from './Forms'
export default class Modals extends Component {
handleCancel = () => {
this.props.closeModal(false);
}
handleCreate = () => {
console.log(this.formRef.getItemsValue()); //6、調用子組件的自定義方法getItemsValue。注意：通過 this.formRef 才能拿到數據
this.props.getFormRef(this.formRef.getItemsValue());
this.props.closeModal(false);
}
render() {
const { visible } = this.props;
return (
<Modal
visible={visible}
title="新增"
okText="保存"
onCancel={this.handleCancel}
onOk={this.handleCreate}
>
<Forms
wrappedComponentRef={(form) => this.formRef = form} //5、使用wrappedComponentRef 拿到子組件傳遞過來的ref（官方寫法）
/>
</Modal>
);
}
}補充知識：react+antd組件 modal里面包裹使用form表單并獲取提交事件
1 先上圖
我這里是點擊“修改密碼”那個按鈕，然后跳到了modal框。（大家這里可以隨便寫一個按鈕，然后給他一個點擊事件讓他可以顯示modal框就好了，我這里著重講解標題的內容）
2 貼代碼
const [visible, setVisible] = useState(false);//antd 控制modal是否顯示
const showMoal=()=>{
// console.log("showMoal")
setVisible(true);
}
const handleCancel = e => {
// console.log("cancel:",e);
setVisible(false);
};
function updatePasswordChange(){
// console.log("0000");
setVisible(false);
}
//Modal框
<Modal
title="密碼修改"
visible={visible}
onCancel={handleCancel}
footer={null}
>
<UpdatePassword updatePasswordChange={updatePasswordChange}></UpdatePassword>
</Modal>
//Form表單的提交事件
const onFinish = values => {
// console.log('Success:', values);
IsUpdatePassword.commit(session.environment,values.newpassword,values.oldpassword,(response, errors) => {
if (errors) {
message.error(errors[0].message);
} else {
//修改密碼成功
message.success('修改密碼成功!');
props.updatePasswordChange();
}
},
(errors) => {
message.error(errors.source.errors[0].message);
})
};
//Form表單部分
return(
<>
<Form
{...layout}
name="密碼修改"
initialValues={{
remember: true,
}}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
<Form.Item
label="舊密碼"
name="oldpassword"
rules={[
{
required: true,
message: '請輸入舊密碼!',
},
]}
>
<Input.Password />
</Form.Item>
<Form.Item
label="新密碼"
name="newpassword"
rules={[
{
required: true,
message: '請輸入新密碼!',
},
]}
hasFeedback
>
<Input.Password />
</Form.Item>
<Form.Item
name="confirm"
label="確認新密碼"
dependencies={['newpassword']}
hasFeedback
rules={[
{
required: true,
message: '請確認新密碼!',
},
({ getFieldValue }) => ({
validator(rule, value) {
if (!value || getFieldValue('newpassword') === value) {
return Promise.resolve();
}
return Promise.reject('兩次新密碼不一致!');
},
}),
]}
>
<Input.Password />
</Form.Item>
{/* <Form.Item {...tailLayout} name="remember" valuePropName="checked">
<Checkbox>Remember me</Checkbox>
</Form.Item> */}
<Form.Item {...tailLayout}>
<Row>
<Col span={12}>
<Button type="primary" htmlType="submit">
確認
</Button>
</Col>
<Col span={12}>
<Button onClick={props.updatePasswordChange}>
取消
</Button>
</Col>
</Row>
</Form.Item>
</Form>
</>
);
}小結：
上面的代碼你看起來可能有點亂，而且也運行不起來，那是肯定的！因為我只粘貼了整個項目的一部分。
下面我來點睛：modal里面使用form表單并獲取提交事件主要是使用了modal的**footer={null}**這個特性把外面的“確認取消按鍵隱藏”，然后使用我們自己的Form的“確定取消”按鍵，然后再通過Form的onFinish 事件來提交值和控制modal框的顯示與消失。
看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
