[英]Render a modal when I click a button - React
I have this "trash" button: 我有这个“垃圾箱”按钮:
<button
type='reset'
className='c-btn--ghost no-border'
onClick={(e) => this.props.handleProjectDelete(e, project.id)}>
<i className='fa fa-trash u-margin-right-tiny'/>
</button>
This is the page with the button. 这是带有按钮的页面。 And when I click it I want a component called CustomModal to render with this props: 当我单击它时,我希望一个名为CustomModal的组件与此道具一起呈现:
<CustomModal
alternateModalClass='c-group-stickies-modal'
onClosePress={this.handleCloseClick}
alternateCloseButtonClass='c-group-stickies-modal__close-button'
text={'are you sure you want to delete it?'}
/>
So a modal like this can appear: 这样的模态就会出现:
But I don't know how to do that. 但是我不知道该怎么做。
This is the component that has the trash button: https://jsfiddle.net/10u6pfjp/ 这是具有垃圾箱按钮的组件: https : //jsfiddle.net/10u6pfjp/
And this is the CustomModal component: https://jsfiddle.net/cp29ms8g/ 这是CustomModal组件: https ://jsfiddle.net/cp29ms8g/
I hope you can do this as below 我希望你可以做到以下
<button
type='reset'
className='c-btn--ghost no-border'
onClick={(e) => {
this.props.handleProjectDelete(e, project.id);
this.renderModal;
}}>
<i className='fa fa-trash u-margin-right-tiny'/>
</button>
As others have mentioned, you should be approaching this with a conditional statement as to whether or not your modal should appear by having a variable in this.state
. 正如其他人提到的那样,您应该通过条件声明来处理此问题,该条件声明是否应该通过在this.state
具有变量来显示模态。 Change it in your button
onClick
. 在button
onClick
更改。 Since you now have 2 functions to run, I made a new function called handleProjectDelete
in your component to handle both at once. 由于您现在有2个函数要运行,因此我在组件中handleProjectDelete
了一个名为handleProjectDelete
的新函数,以同时处理这两个函数。
At the bottom of your render
, you'll see that I added the conditional where you should place a modal. 在render
的底部,您会看到我在应该放置模态的位置添加了条件。 I used <Modal/>
as a placeholder. 我使用<Modal/>
作为占位符。 Use CSS to force it into a position that's appropriate for a modal. 使用CSS将其强制到适合模态的位置。
const MAX_PROJECTS_PER_PAGE = 10
export class ProjectsTable extends Component {
constructor() {
super()
this.state = {
showModal: false
}
}
componentWillReceiveProps(nextProps) {
const { history, organizations, hasFetched } = nextProps
if (!deepEqual(this.props, nextProps) && hasFetched) {
if (!organizations || organizations.isEmpty()) {
history.push('/beta-code')
}
}
}
handleProjectDelete(e, project.id) {
this.setState({showModal: true})
this.props.handleProjectDelete(e, project.id)
}
renderProjectsTable() {
const { projects } = this.props
const projectsWithoutDefault = projects.filter(proj => proj.name !== 'default')
const projectsTable = projectsWithoutDefault.map((project) => {
return ({
name: <NavLink to={`/projects/${project.id}`}> {project.name} </NavLink>,
team: <UsersList users={fromJS(project.users)} showBadge showMax={5} type='list' />,
retro:
(project.lastRetro)
? <NavLink className='c-nav-link'
exact to={`/retrospectives/${project.lastRetro.id}`}>
{moment.utc(project.lastRetro.date)
.format('dddd, DD MMMM YYYY').toString()}
</NavLink> : <div>No retros found</div>,
delete:
<div className='delete-align'>
<button
type='reset'
className='c-btn--ghost no-border'
onClick={(e) => this.handleProjectDelete(e, project.id)}>
<i className='fa fa-trash u-margin-right-tiny'/>
</button>
</div>
})
})
return projectsTable
}
render () {
return (
<div className='o-wrapper u-margin-top'>
<TablePagination
title='Projects'
data={ this.renderProjectsTable()}
headers={['Name', 'Team', 'Last Retrospective', ' ']}
columns='name.team.retro.delete'
nextPageText='>'
prePageText='<'
perPageItemCount={ MAX_PROJECTS_PER_PAGE }
totalCount={ this.renderProjectsTable().length }
arrayOption={ [['size', 'all', ' ']] }
/>
{ this.state.showModal ? <div className='delete-modal'><Modal/><div/> : null }
</div>
)
}
}
const mapStateToProps = ({
projects
}) => ({
hasFetched: projects.get('hasFetched'),
projects: projects.get('projects')
})
ProjectsTable.defaultProps = {
projects: []
}
export default connect(mapStateToProps)(ProjectsTable)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.