两个lodash设置在一个功能?

问题描述 投票:2回答:2

这有可能在一个条件下制作两个设定的功能吗?我的目标是创建3个按钮调用一个函数..以更改具有首选条件的this.state.status。

'all'= null(这是我的目标,我的params默认应该是status = null或'')我想要我的this.state.status:null

'approve'= approve(status = approve)我在this.state.status中的目标:批准

'progress'=进度(状态=进度)我在this.state.status中的目标:进度

    this.state = {
      status: '',
    }
  }

//---------------------button sort--------------------------//
  onButtonChange = ( status, value) => {
    setTimeout(() => AppActions.loadingMask(true))

    if (status === 'all')
    {
      _.set(this.state.data, status, null).set(this.state.status, status, ' ')
     // status = null - my goal is the this.state.status: ' '
    }

    else if (status ==='approve')
    {
      _.set(this.state.data, status, 'approve').set(status, this.state.status, 'approve')
       // status = approve - my goal is the this.state.status: approve
    }
    else if (status === 'progress')
    {
      _.set(this.state.data, status, 'progress').set(status, this.state.status, 'progress')
      // status = progress - my goal is the this.state.status: progress
    }
    BookingsTripsAction.getTrips(
      this.DEFAULT_LIMIT,
      this.state.activePage,
      _.get(this.state.data, status, status))
  }


  <Col>
    <Paper>
      <FlatButton label="All" style={{margin: 12, borderBottom:(this.state.status == 'all' ? '1px solid #2196f3' : 0)}} onTouchTap={this.onButtonChange.bind(this, 'all')}  />
      <FlatButton label="Approve" style={{margin: 12, borderBottom:(this.state.status == 'approve' ? '1px solid #2196f3' : 0)}} onTouchTap={this.onButtonChange.bind(this, 'approve')} />
      <FlatButton label="In-Progress" style={{margin: 12, borderBottom:(this.state.status == 'progress' ? '1px solid #2196f3' : 0)}} onTouchTap={this.onButtonChange.bind(this, 'progress')}  />
    </Paper>
  </Col>
reactjs ecmascript-6 lodash material-ui
2个回答
0
投票

使用setState

if (status === 'all' || status === null)
    {
     this.setState({data:''});
    }

    else if (status ==='approve')
    {

     this.setState({data:status});
    }
    else if (status === 'progress')
    {
     this.setState({data:status});

    }

1
投票

来自reactjs文档:

不要直接修改状态。

它不会重新渲染您的组件。始终使用setState()。阅读how to use state correctly上的doumentation。

© www.soinside.com 2019 - 2024. All rights reserved.