我在 table 行 Click 上编辑了行数据，如何用空形式调用相同的模态？

Question

我在 antd table 中获取数据使用 json data.Now 点击 table 行我在 Modal.Now 中获取数据我想单击具有空数据的注册按钮时调用相同的模态？

这是我的 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>

        )
    }

我有一个 NewModal。我正在使用 mapPropsValues.Now 在 table rowClick 上获取数据我想用空数据调用相同的模态？如果我单击 table 行调用相同的模态我正在获取数据？现在如何要获得空表格，请使用相同的模式单击“注册”按钮？

我的模态有以下代码？

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

并且我正在使用带有 antd 的 formik 获取表单数据 component.Now 我想调用相同的模态我点击 table 空表单行点击注册按钮？

<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)

Answer 1

如果你想再次渲染 Modal 组件，我建议你在点击按钮时有条件地渲染。

所以你可以有这样的状态

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

然后在你的 jsx 代码中，你将状态设置为与先前状态相反的东西，show/not 显示模态

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

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

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

编辑：

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

使用像Redux/Thunk这样的中间件将data/props传输到距离原始组件更远的另一个组件。 https://github.com/reduxjs/redux-thunk
重新定位你的道具，这样你就可以从多个地方将道具传递给你的模态组件（这需要重构你的架构，因此我建议使用像 redux 这样的东西。

我在 table 行 Click 上编辑了行数据，如何用空形式调用相同的模态？

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

reactjs

gatsby

antd

yup

formik