Question

我试图从onClickHandler函数调用redux操作，该函数作为props传递给功能组件但没有任何反应。

我将clickHandler作为prop传递给子Component，并在ParentComponent中处理它作为Child Component是一个功能组件。

ParentComponent代码

import React, { Component } from 'react';
import { connect,store } from 'react-redux';
// import statement for component
// import statement for redux actions

class ParentComponent extends Component {
  constructor(props){
    super(props);
    this.clickHandler = this.clickHandler.bind(this);
  }

  clickHandler(data){
   // call this.props.actions(data) here;
  }

  renderList(){
        return <ChildComponent 
          key={field.name}
          clickHandler={() => this.clickHandler(field.name)}
          />
    })
  }

  render() {
    return (
      <div className="">
        {this.renderList()}
      </div>
    );
  }
}

export default connect(null, {
   actions
 })(ParentComponent);

ChildComponent代码

const ChildComponent = (props) => {
  return(    
    <span onClick={props.clickHandler} className="glyphicon glyphicon-sort"></span>
  )
}

Answer 1

最好将道具传递给子组件，而子组件onClick会将参数传递给函数

父组件

import React, { Component } from 'react';
import { connect,store } from 'react-redux';
// import statement for component
// import statement for redux actions

class ParentComponent extends Component {
  constructor(props){
    super(props);
    this.clickHandler = this.clickHandler.bind(this);
  }

  clickHandler(data){
   // call this.props.actions(data) here;
  }

  renderList(){
        return <ChildComponent 
          key={field.name}
          name={field.name}
          clickHandler={this.clickHandler}
          />
    })
  }

  render() {
    return (
      <div className="">
        {this.renderList()}
      </div>
    );
  }
}

export default connect(null, {
   actions
 })(ParentComponent);

子组件

const ChildComponent = (props) => {
  return(    
    <span onClick={()=> props.clickHandler(props.name)} className="glyphicon glyphicon-sort"></span>
  )
}

如何从clickHandler调用redux动作传递给函数组件作为prop？

1 个答案: