Question

我想使用语义UI react模式，但它需要一个触发器，在所有examples in the documentation中，一个按钮是一个触发器。

我创建了一张卡片，我想用那张卡片作为触发器，我怎么能实现这个呢？

我还发现这个issue on 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

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

/api/blocked-clients/{id}

将卡用作触发器

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

在语义 - ui-react模式中使用自定义组件作为触发器

1 个答案: