时间戳

首页 > 解决方案 > How to call a same modal with empty form what i have edited row data on a table row Click?

reactjs - How to call a same modal with empty form what i have edited row data on a table row Click?

问题描述

i am getting data in antd table using json data.Now click on a table row iam getting the data in a Modal.Now i want to call same modal on click on register button with empty data?

Here my sample data for StudentTable

 showModal = () => {

        this.setState({
            visible: true,
        });
    }

    onOk = (e) => {
        this.setState({
            visible: false,
        })

    }

    onCancel = (e) => {
        console.log(e);
        this.setState({
            visible: false
        })
    }


    rowClick = (record, rowIndex) => {
        alert("student id...." + record.id)
        alert(JSON.stringify(record))
        this.showModal();
        this.setState({
            StudentData: record
        })


    }

    render() {


        return (

            <div>
                <div align="right">
                <Button type="primary" onClick={this.showModal}>Register</Button>
                </div>
                <h2>Student Data</h2>
                <Table
                    dataSource={data}
                    columns={this.state.columns}
                    pagination={{ pageSize: 5 }}
                    rowKey={record => record.id}
                    onRow={(record, rowIndex) => {
                        return {
                            onClick: (event) => this.rowClick(record, rowIndex)
                        }
                    }}

                />
                <NewModal visible={this.state.visible}
                    onOk={this.onOk}
                    onCancel={this.onCancel}
                    StudentData={this.state.StudentData}
                />


            </div>

        )
    }

i have a NewModal. iam getting the data on a table rowClick using mapPropsValues.Now i want to call same Modal with empty data?If i click on a table row call same modal i am getting the data?Now How to get empty form click on Register button using same modal?

my modal has following code?

import React from 'react'
import {
    Modal
} from 'antd'
import FormikApollo from "./FormikForm"

class NewModal extends React.Component {

    state = {

        visible: this.props.visible
    }


    render() {
         const { StudentData} = this.props
         console.log(this.props.StudentData)
        return (

            <Modal
                title="Basic Modal"
                visible={this.props.visible}
                onOk={this.props.onOk}
                onCancel={this.props.onCancel}
                onCreate={this.handleCreate}

            >
                <FormikApollo StudentData={this.props.StudentData}/>
            </Modal>

        )
    }

}

export default NewModal

And iam getting the form data using formik with antd component.Now i want to call same modal what i get click on a table row with empty form click on a register button?

<Form onSubmit={handleSubmit}>
                    <Row gutter={4}>
                        <Col span={12} push={5}>
                            <Field
                                name="id"
                                label="StudentID"
                                placeholder="Enter a Id"
                                component={AntInput}                                
                                type="text"                                
                                formitemlayout={formItemLayout}

                            />

                            <Button type="primary" htmlType="submit">Submit</Button>
                        </Col>
                    </Row>

                </Form>

            </div>
        )
    }

}

const FormikApp = (withFormik)({

    mapPropsToValues: ({StudentData}) => ({
        ...(StudentData)
    }),        

    validationSchema: Yup.object().shape({
        username: Yup.string()
            .min(3, "Username must be above 3 characters")
            .required("Username is required"),
        email: Yup.string()
            .email("Invalid Email !!")
            .required("Email is required"),
        password: Yup.string()
            .min(6, "Password must be above 6 characters")
            .required("Password is required"),

        dateofbirth: Yup.string().required("Date is required")



    }),
    handleSubmit(values,{resetForm}) {
        alert(JSON.stringify(values))
        console.log(values)

    }

})(FormikApollo)

标签： reactjsgatsbyantdformikyup

解决方案

如果您想再次渲染 Modal 组件，请单击按钮，我建议您在有条件的情况下渲染。

所以你可以有这样的状态

state={showModal: false}或者state={isSubmitted: false}

然后在您的 jsx 代码中，您将状态设置为与先前状态相反的位置，以显示/不显示模态

<button onClick={e => this.setState(prevState => ({showModal: !prevState.showModal}))}>Submit </button>

{this.state.showModal &&
    <Modal {...props} show={this.state.showModal} />
  }

然后你可以将现有的道具传递给你的模态，或者如果你需要的话，可以传递给其他道具。然后你传入状态，它控制模式显示或不进入模式。

编辑：

进一步了解问题后，有两种方法可以解决此问题。

  1. 使用 Redux/Thunk 之类的中间件将数据/道具传输到远离原始组件的另一个组件。https://github.com/reduxjs/redux-thunk

  2. 重新定位你的 props，这样你就可以从多个地方将 props 传递给你的模态组件（这需要重组你的架构，因此我建议使用类似 redux.

推荐阅读