使用自定义组件作为语义UI反应模式中的触发器

Question

我想使用语义UI react modal，但是它需要触发器，在文档的所有示例中 ，按钮都是触发器。

我已经创建了一张卡，并且想要使用该卡作为触发器，如何实现呢？

我还在Github上发现此问题很有用，但对我没有用。 这个问题的答案说我们必须处理一些未处理的道具，我做了相应的工作，但仍然没有用。 这可能是我在这里处理的错误吗？

这是我的代码：创建了一张卡片

import React from 'react';
import { Card, Icon } from 'semantic-ui-react'

export default class AddAssignmentCard extends React.Component {

  render() {
        const { ...rest } = this.props;
    return (
        <Card { ...rest }>
            <Card.Content textAlign="center" className="p-5">
                <Card.Meta>
                    <a>
                    <Icon name='plus' size="big" />
                    <h3 className="mt-1">Create Assignment</h3>
                  </a>
              </Card.Meta>
        </Card.Content>
        </Card>
    );
  }
}

然后将其用作触发器：

import React from 'react';
import { Modal, Form, Button } from 'semantic-ui-react'
import AddAssignmentCard from './AddAssignmentCard';

export default class CreateAssignmentModal extends React.Component {
  state = {}

  render() {
    return (
        <Modal className="scrolling" size='tiny' trigger={<AddAssignmentCard {...this.props} />}>
            <Modal.Header>Create Assignment</Modal.Header>
            <Modal.Content>
                <Form>
                    <Form.Field>
                        <label>Title</label>
                        <input placeholder="Assignment Title" />
                    </Form.Field>
                </Form>
            </Modal.Content>
        </Modal>
    )
  }
}

然后像这样渲染它：

<AddAssignmentCard {...this.props} />

Answer 1

做了一些调整，最终对我有用。 我的错误是我正在渲染触发器而不是模式触发器。

import React from 'react';
import { Card, Icon } from 'semantic-ui-react'

export default class AddAssignmentCard extends React.Component {

  render() {
        const { ...rest } = this.props;
    return (
        <Card { ...rest }>
            <Card.Content textAlign="center" className="p-5">
                <Card.Meta>
                  <Icon name='plus' size="big" />
                  <h3 className="mt-1">Create Assignment</h3>
              </Card.Meta>
        </Card.Content>
        </Card>
    );
  }
}

使用卡作为触发器

import React from 'react';
import { Modal, Form, Button, Dropdown } from 'semantic-ui-react'
import AddAssignmentCard from './AddAssignmentCard';

export default class CreateAssignmentModal extends React.Component {
  state = {}

  render() {
    return (
        <Modal className="scrolling" size='tiny' trigger={<AddAssignmentCard {...this.props} />}>
            <Modal.Header>Create Assignment</Modal.Header>
            <Modal.Content>
                <Form>
                    <Form.Field>
                        <label>For which of your students? </label>
                        <Dropdown
                            fluid
                            options={[]}
                            search
                            selection
                            placeholder='Select Student'
                            noResultsMessage='You have no student yet.'
                        />
                    </Form.Field>
                    <Form.Field>
                        <label>Title</label>
                        <input placeholder="Assignment Title" />
                    </Form.Field>
                    <Form.TextArea label='Description' placeholder='Write the Assignment details here...' />
                </Form>
            </Modal.Content>
        </Modal>
    )
  }
}

然后像这样渲染模态

<CreateAssignmentModal {...this.props} />