#reactjs #gatsby #antd #formik #yup
#reactjs #gatsby #antd #formik #ага
Вопрос:
я получаю данные в таблице 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)
Ответ №1:
Если вы хотите снова отобразить модальный компонент, я бы посоветовал вам отобразить 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} />
}
и затем вы могли бы передать свои существующие реквизиты в свой модал или другие реквизиты, если вам это нужно. Затем вы переходите в состояние, которое скорее определяет, модальные показы или нет, в модальные.
Редактировать:
после дальнейшего понимания проблемы есть два способа решить эту проблему.
-
Используйте некоторое промежуточное программное обеспечение, такое как Redux / Thunk, для переноса данных / реквизитов в другой компонент, расположенный дальше от исходного компонента. https://github.com/reduxjs/redux-thunk
-
Переместите свой реквизит, чтобы вы могли передавать реквизит своему модальному компоненту из нескольких мест (это потребовало бы реструктуризации вашей архитектуры, поэтому я рекомендую использовать что-то вроде redux.
Комментарии:
1. спасибо за данный ответ. я добавляю реквизиты в модал, но он не работает
2. где находится ваш модал?
3. Модал загружается нормально?
4. в чем проблема?
5. в моем коде нет изменений. я не получаю модал при нажатии на кнопку