Question

我有这个“垃圾”按钮：

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

这是带按钮的页面。当我点击它时，我想要一个名为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?'}
  />

所以这样的模态会出现：

但我不知道该怎么做。

这是具有垃圾按钮的组件： https://jsfiddle.net/10u6pfjp/

这是CustomModal组件：https://jsfiddle.net/cp29ms8g/

Answer 1

我希望你可以这样做

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

Answer 2

正如其他人所提到的那样，你应该通过一个条件陈述来接近这一点，关于你的模态是否应该通过this.state中的变量出现。在button onClick中更改它。由于您现在有2个要运行的函数，因此我在组件中创建了一个名为handleProjectDelete的新函数来同时处理这两个函数。

在render的底部，你会看到我添加了条件，你应该放置一个模态。我使用<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)

单击按钮时渲染模态 - React

2 个答案: