Question

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

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

pylint warnings

父级渲染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

This是我得到的错误。我有什么想法吗？

Answer 1

您永远不会将点击道具传递给<ipython-input-87-ebcd473faf08> in name2unicode(name) 13 if not m: 14 raise KeyError(name) ---> 15 return unichr(int(m.group(0)))。试试这个：

ButtonsGrid

Answer 2

你需要将作为道具点击的功能传递给你的ButtonsGrid，如果你从道具中使用这个功能，你就不需要这个功能

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

或者如果您需要在ButtonsGrid上使用单击的函数，您应该在构造函数中绑定此函数，如下所示：

constructor (props){
  super(props)
  this.clicked = this.clicked.bind(this)
}

并使用onClick={this.clicked}在您的组件中使用它。

或者你直接用onClick={() => this.clicked}

绑定函数

使用PropTypes从父类调用方法

2 个答案: