我的页面上有很多按钮，并且希望每个按钮在单击时都可以打开自己的模式形式。我有一个问题，即多次使用相同的表单/模式不会产生唯一的表单。例如，单击第一个按钮，然后在表单中键入“ asdf”也将填充由第二个按钮控制的表单。
我如何重用我的模态/表单并仍然保持它们的数据不同？
我的代码：
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Button, Modal, Form, Input, Radio } from 'antd';
const FormItem = Form.Item;
const CollectionCreateForm = Form.create()(
(props) => {
const { visible, onCancel, onCreate, form } = props;
const { getFieldDecorator } = form;
return (
<Modal
visible={visible}
title="Create a new collection"
okText="Create"
onCancel={onCancel}
onOk={onCreate}
>
<Form layout="vertical">
<FormItem label="Title">
{getFieldDecorator('title', {
rules: [{ required: true, message: 'Please input the title of collection!' }],
})(
<Input />
)}
</FormItem>
<FormItem label="Description">
{getFieldDecorator('description')(<Input type="textarea" />)}
</FormItem>
<FormItem className="collection-create-form_last-form-item">
{getFieldDecorator('modifier', {
initialValue: 'public',
})(
<Radio.Group>
<Radio value="public">Public</Radio>
<Radio value="private">Private</Radio>
</Radio.Group>
)}
</FormItem>
</Form>
</Modal>
);
}
);
class CollectionsPage extends React.Component {
state = {
visible: false,
};
showModal = () => {
this.setState({ visible: true });
}
handleCancel = () => {
this.setState({ visible: false });
}
handleCreate = () => {
const form = this.form;
form.validateFields((err, values) => {
if (err) {
return;
}
console.log('Received values of form: ', values);
form.resetFields();
this.setState({ visible: false });
});
}
saveFormRef = (form) => {
this.form = form;
}
render() {
return (
<div>
<Button type="primary" onClick={this.showModal}>New Collection</Button>
<CollectionCreateForm
ref={this.saveFormRef}
visible={this.state.visible}
onCancel={this.handleCancel}
onCreate={this.handleCreate}
/>
<Button type="primary" onClick={this.showModal}>New Collection</Button>
<CollectionCreateForm
ref={this.saveFormRef}
visible={this.state.visible}
onCancel={this.handleCancel}
onCreate={this.handleCreate}
/>
<Button type="primary" onClick={this.showModal}>New Collection</Button>
<CollectionCreateForm
ref={this.saveFormRef}
visible={this.state.visible}
onCancel={this.handleCancel}
onCreate={this.handleCreate}
/>
<Button type="primary" onClick={this.showModal}>New Collection</Button>
<CollectionCreateForm
ref={this.saveFormRef}
visible={this.state.visible}
onCancel={this.handleCancel}
onCreate={this.handleCreate}
/>
<Button type="primary" onClick={this.showModal}>New Collection</Button>
<CollectionCreateForm
ref={this.saveFormRef}
visible={this.state.visible}
onCancel={this.handleCancel}
onCreate={this.handleCreate}
/>
<Button type="primary" onClick={this.showModal}>New Collection</Button>
<CollectionCreateForm
ref={this.saveFormRef}
visible={this.state.visible}
onCancel={this.handleCancel}
onCreate={this.handleCreate}
/>
</div>
);
}
}
ReactDOM.render(<CollectionsPage />, document.getElementById('container'));
问题在于每种形式都被赋予相同的道具，因此它们被视为相同的形式。在render函数中，创建多个Buttons和CollectionCreateForms：
<Button type="primary" onClick={this.showModal}>New Collection</Button>
<CollectionCreateForm
ref={this.saveFormRef}
visible={this.state.visible}
onCancel={this.handleCancel}
onCreate={this.handleCreate}
/>
// repeated...
问题在于您将相同的道具传递到每个道具中。您只需要设置一个ref和一个即可state。每种形式都是完全相同的形式。当一个模态可见时，它们都是可见的。
取而代之的是，您需要为每种表单保留单独的状态和引用。（请继续阅读，不要仅仅复制此代码...这是错误的代码。）
class CollectionsPage extends React.Component {
state = {
visible1: false,
visible2: false
};
showModal1 = () => {
this.setState({ visible1: true });
}
showModal2 = () => {
this.setState({ visible2: true });
}
handleCancel1 = () => {
this.setState({ visible1: false });
}
handleCancel2 = () => {
this.setState({ visible2: false });
}
handleCreate1 = () => {
// ...
this.setState({ visible1: false });
}
handleCreate2 = () => {
// ...
this.setState({ visible2: false });
}
saveFormRef1 = (form) => {
this.form1 = form;
}
saveFormRef2 = (form) => {
this.form2 = form;
}
render() {
return (
<div>
<Button type="primary" onClick={this.showModal}>New Collection</Button>
<CollectionCreateForm
ref={this.saveFormRef1}
visible={this.state.visible1}
onCancel={this.handleCancel1}
onCreate={this.handleCreate1}
/>
<Button type="primary" onClick={this.showModal}>New Collection</Button>
<CollectionCreateForm
ref={this.saveFormRef2}
visible={this.state.visible2}
onCancel={this.handleCancel2}
onCreate={this.handleCreate2}
/>
</div>
);
}
}
我向您展示了如何解决问题的方法，但这是实现问题的糟糕方法。随着您添加更多的表单和模态，这将逐渐失去控制。我们可以通过将逻辑委托给子组件来进行改进。
首先，我们可以创建一个ModalToggle将按钮和表单/模式封装在一起的泛型：
const CollectionsPage = () => (
<div>
<ModalToggle
label="New Collection"
modal={ CollectionFormModal }
/>
<ModalToggle
label="New Collection"
modal={ CollectionFormModal }
/>
</div>
);
我们可以ModalToggle通过在内部移动所有状态来随意重用，这样就足够了：
class ModalToggle extends React.Component {
state = {
visible: false
};
toggleModal = () => {
this.setState(prevState => ({ visible: !prevState.visible }));
}
render() {
const Modal = this.props.modal;
return (
<div>
<Button type="primary" onClick={this.toggleModal}>{this.props.label}</Button>
<Modal
visible={this.state.visible}
toggleVisibility={this.toggleModal}
/>
</div>
);
}
}
然后，我们只需要添加一个CollectionFormModal即可处理之前存在的其他逻辑CollectionsPage：
class CollectionFormModal extends React.Component {
handleCancel = () => {
this.props.toggleVisibility();
}
handleCreate = () => {
// ...
this.props.toggleVisibility();
}
render() {
return (
<CollectionCreateForm
onCancel={this.handleCancel}
onCreate={this.handleCreate}
visible={this.props.visible}
/>
);
}
}
您可以通过将up的各Modal部分CollectionCreateForm移到CollectionFormModal，而不是使用refs，将表单编写为受控组件来进一步改进
| 归档时间： |
|
| 查看次数： |
5844 次 |
| 最近记录： |