在semantic-ui-react模式中使用自定义组件作为触发器
在semantic-ui-react模式中使用自定义组件作为触发器
提问于 2018-02-09 07:03:12
我想使用语义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} />回答 1
Stack Overflow用户
回答已采纳
发布于 2018-02-09 17:41:44
我做了一些调整，这对我来说终于起作用了。我的错误是我渲染的是触发器，而不是模式。
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} />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48696221
复制相关文章
相似问题
腾讯云开发者
