Блог

я получаю данные в таблице antd, используя данные json.Теперь щелкните по строке таблицы, и я получу данные в модальном виде.Теперь я хочу вызвать ту же модальную форму при нажатии на кнопку регистрации с пустыми данными?

Вот мой образец данных для 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.Теперь я хочу вызвать тот же модал с пустыми данными?Если я щелкаю по строке таблицы, вызывающей тот же модал, я получаю данные?Теперь как получить пустую форму, нажав на кнопку регистрации, используя ту же модальную форму?

мой модал имеет следующий код?

 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
  

И я получаю данные формы с помощью formik с компонентом antd.Теперь я хочу вызвать тот же модал, что я получаю, щелкнув по строке таблицы с пустой формой, нажав на кнопку регистрации?

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

Если вы хотите снова отобразить модальный компонент, я бы посоветовал вам отобразить if условно при нажатии кнопки.

Таким образом, у вас может быть такое состояние, как это

state={showModal: false} или state={isSubmitted: false}

И затем в вашем коде jsx что-то вроде этого, где вы устанавливаете состояние, противоположное предыдущему состоянию, чтобы показывать / не показывать модал

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

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

и затем вы могли бы передать свои существующие реквизиты в свой модал или другие реквизиты, если вам это нужно. Затем вы переходите в состояние, которое скорее определяет, модальные показы или нет, в модальные.

Редактировать:

после дальнейшего понимания проблемы есть два способа решить эту проблему.

1. Используйте некоторое промежуточное программное обеспечение, такое как Redux / Thunk, для переноса данных / реквизитов в другой компонент, расположенный дальше от исходного компонента. https://github.com/reduxjs/redux-thunk

2. Переместите свой реквизит, чтобы вы могли передавать реквизит своему модальному компоненту из нескольких мест (это потребовало бы реструктуризации вашей архитектуры, поэтому я рекомендую использовать что-то вроде redux.