onClick事件的调度操作

时间:2017-03-28 09:01:37

标签: javascript reactjs redux

在反应组件中我做了一个函数

 handleClick(event, key, value) {
    event.preventDefault()
    this.setState({
      query:"",
      key:key,
      value:value
    });
    this.props.onClick(this.state);
    console.log("key...." + key   );
    console.log("val...." + value);
  }

当我点击链接

时应该调用它
onClick={(e) => this.handleClick(e, {key}, {el}) }

同样使用connect我的调度操作如下

export const mapDispatchToProps = (dispatch) => ({

  onClick: (query, key, value) => dispatch(onSearch(query,key, value)


  )
});

但是在搜索方法上键和值都是未定义的。但是在handleClick函数中我得到了

key....[object Object]
val....[object Object]

2 个答案:

答案 0 :(得分:1)

键和值将是未定义的。你需要在setState的回调上调用props方法,因为在调用setState之后你不会获得更新的状态值。

handleClick(event, key, value) {
        event.preventDefault()
        this.setState({
          query:"",
          key:key,
          value:value
        },()=>{

           this.props.onClick(this.state);
        console.log("key...." + key   );
        console.log("val...." + value);
    });

      }

答案 1 :(得分:0)

您拨打电话的方式' onClick'函数是错误的,现在你只传递一个参数,而不是三个。

应该像这样调用

// Only for DEMO
$(function() {

  $('#toggleWidth').on('click', function(e) {

    $('.multiLineLabel').toggleClass('maxWidth');

  });

})