Question

我有一个父类，它使用其子级从“天”数组中渲染一些按钮。到目前为止，一切正常。我使用处理程序将handleClick（）传递给孩子。如果没有if语句，我也可以在控制台中返回它，这也可以工作。我的代码有什么问题，或者想到了if语句。如果我点击数值为days [0] = 1的按钮，它应该回复“ Hi 1”。

父母：

export default class Parent extends React.Component {

  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      days: [1,2,3]
    }

  }

  handleClick() {
      if(this.props.value === 1) {
      return console.log('Hi 1')
    }
  }

  render() {
    return (
      <div>
          <div>
            {this.state.days.map(item => <ButtonDays handler={ () => this.handleClick()} key={item} value={item} />)}
          </div>
      </div>
    );
  }
}

孩子：

export default class ButtonDays extends React.Component { 
  render() {
    return (
      <Button onClick={this.props.handler}>{this.props.value}</Button>
    );
  }
}

Answer 1

在父组件的以下部分

handleClick() {
  if(this.props.value === 1) {
    return console.log('Hi 1')
  }
}

您正在检查名为value的道具，但是该道具仅在子组件中定义。

您应该做的是将点击的值作为handler函数的参数传递。

<Button onClick={() => this.props.handler(this.props.value)}>{this.props.value}</Button>

然后在您的父组件中：

handleClick(value) {
  if(value === 1) {
    return console.log('Hi 1')
  }
}

ReactJS在父类中使用子道具

1 个答案: