onClick事件的調度動作

Question

在react組件中，我做了一個功能

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

也使用連接我調度動作如下

export const mapDispatchToProps = (dispatch) => ({

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


  )
});

但是在搜索方法中，鍵和值都不確定。但是在handleClick函數中，我得到了

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

Answer 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);
    });

      }

Answer 2

您調用“ onClick”函數的方式是錯誤的，現在您只傳遞了一個參數，而不是三個。

應該這樣稱呼

this.props.onClick(query, key, value);