Question

我正在使用TypeScript开发基于React钩子的功能应用程序，并且正在使用蚂蚁设计中的模式。我正在通过模式提交表格表格。因此，将多次调用该模式以填充表的不同行。

问题是，当模态第二次，第三次或横向弹出时，它总是带有先前的值。

为避免这种情况，我在模式EnableViewState="false"中进行了设置，但此方法无效。我设置 destroyOnClose={true}。没用在modal documentation中，它是在当destroyOnClose不起作用时编写的，我们需要使用。但是在哪里定义呢？因为当我设置为 <Form onSubmit={props.inputSubmit} preserve={false}以我的模式形式出现，我收到一条错误消息，说Type '{ children: Element[]; onSubmit: any; preserve: boolean; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Form>......?

您使用什么以便每次模态重新加载时都将其重新加载为空？我不想在输入的表单值字段中分配状态。还有其他选择，例如destroyOnClose = {true}吗？

这是我的模态，

<Form onSubmit={props.inputSubmit}>
  <Row>
    <Col span={10}>
      <Form.Item>
        <Text strong={true}>Article name: </Text>
      </Form.Item>
    </Col>
    <Col span={12}>
      <Form.Item>
        <Input
          style={{ backgroundColor: '#e6f9ff' }}
          name="articleName"
          onChange={props.handleArticleModalInput}
        />
      </Form.Item>
    </Col>
  </Row>
</Form>

这里是调用模态的地方，

return (
  <>
    <ArticleTableModal
      destroyOnClose={true}
      isVisible={modalVisibilty}
      inputSubmit={inputSubmit}
      handleCancel={handleCancel}
      filledData={fetchedData}
      articleNumber={articleNumber}
      handleArticleModalInput={handleArticleModalInput}

    />

    <Table
      pagination={false}
      dataSource={articleDataSource}
      columns={articleColumns}
      scroll={{ y: 400 }}
      bordered
    />
  </>
)

非常感谢您的帮助。

Answer 1

在这里，我们将使用一个自定义钩子，该钩子将ModalDialog组件包装在其他地方（例如第三方UI库），并返回给我们一个setter和一个自包含组件/ null的元组。挂钩使这种方法变得更加整洁，但您仍然可以使用类组件来完成所有这些操作，但要花些时间。由于标记了Typescript，这应该很简单，但是您可能必须指定useState的用法为useState<React.ReactChild>();，以避免类型错误。

const useDialog = (ModalComponent) => {
  const [modalDialogState, setModalDialogState] = useState();
  return modalDialogState
    ? [
      setModalDialogState,
      // You may have to tweak this a bit depending on
      // how your library works.
      () => (
        <ModalComponent onClose={() => setModalDialogState('')> 
          {modalDialogState}
        </ModalComponent>
      ),
    ]
    : [setModalDialogState, null];
};

const MyComponent = () => {
  const [setModal, Modal] = useDialog(WhateverLibraryComponent);
  useEffect(() => {
    // Cleanup function, run on unMount and clears dialog contents.
    return () => setModal('');
  }, [setModal]);

  return Modal
    ? (
      <>
        <Modal />
        /* Normal render stuff */
      </>
    )
    // You can optionally render a button here with onClick
    // set to a function that calls setModal with some 
    // appropriate contents.
    : (/* Normal render stuff */)
};

Answer 2

您需要在每次模式启动时为表单中的字段生成动态键。

这是一个可以玩的沙盒。如果您不对键进行任何更改，则模式会在其中保留值。如果您更改键并启动模式，则将清除该值。

Sandbox Link

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Modal, Button, Input } from "antd";

class App extends React.Component {
  state = { visible: false, theKey: "dummy" };

  showModal = () => {
    this.setState({
      visible: true
    });
  };

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

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

  handleChange = ({ target: { value } }) => {
    this.setState({ theKey: value });
  };

  render() {
    return (
      <>
        <Input onChange={this.handleChange} placeholder="key for input field"/>
        <br />
        <Button type="primary" onClick={this.showModal}>
          Open Modal
        </Button>
        <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <Input
            key={this.state.theKey}
            style={{ backgroundColor: "#e6f9ff" }}
            name="articleName"
          />
        </Modal>
      </>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

为什么destroyOnClose = {true}在React中不起作用

2 个答案: