javascript - 使用PropTypes从父类中调用方法

我有一个简单的Parent-> Child关系，并希望通过child组件从父级调用方法。

我的子组件是一个按钮网格，其中每个按钮都有一个名称。看起来像这样。

class ButtonsGrid extends React.Component {

    clicked = (product) => {
        this.props.clicked(product);
    }

    render() {
        return (
            <div>
                <GridList cellHeight={50} cols={10}>
                    {this.props.list.length > 0 ? this.props.list.map(product => {
                        return (
                            <Button ref='productButton' style={{width: '200px', border: '1px solid'}} variant="raised" color="primary" onClick={() => this.props.clicked(product)}>
                                <div
                                    style={{fontSize:'12px', display: 'flex', justifyContent: 'center', textAlign:'center'}}>
                                        {product.name}
                                </div>
                            </Button>
                        );
                    }) : ''}
                </GridList>
            </div>
        );
    }
}

ButtonsGrid.propTypes = {
    clicked: PropTypes.func.isRequired,
}

export default ButtonsGrid;

父级呈现ButtonsGrid组件，并应在每次按按钮时记录该按钮的名称。

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      list: [
        {"name":"test1"},
        {"name":"test2"},
      ]
    };
  }

  clicked = (product) => {
    console.log(product.name);
  }
  render() {
    return (
      <div className="container-full padding-0">
        <div className="row">
          <div className="col-sm-3">
            <ButtonsGrid list={this.state.list}/>
          </div>
          <div className="col-sm-9" style={{paddingLeft:0, paddingRight:0}} clicked={(product) => this.clicked(product)}>
            <ButtonsGrid list = {this.state.list} />
          </div>
        </div>
      </div>
    );
  }
}

export default App;

This是我遇到的错误。有什么想法我做错了吗？

最佳答案

您永远不会将点击的道具传递给ButtonsGrid。尝试这个：

<ButtonsGrid list={this.state.list} clicked={this.clicked} />

关于javascript - 使用PropTypes从父类中调用方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49238261/