Question

我有两个功能：

zoomIn () { this.setState({zoom: true}) }
zoomOut () { this.setState({zoom: false}) }

我作为属性传递：

<TransitionGroup>
 <Carousel
    promo={this.props.promo}
    images={this.props.images}
    zoom={this.state.zoom}
    key={this.state.zoom}
    zoomIn={this.zoomIn.bind(this)}
    zoomOut={this.zoomOut.bind(this)} 
  />
</TransitionGroup>

在轮播中我在组件中使用它们：

onClick={this.props.zoomOut}

实际上，缩放的值与状态有很多不同，所以我想只有一个函数：

zoom (state) { this.setState({zoom: state}

我尝试传递这样的值，但它不起作用：

zoom={this.zoom.bind(this, state)}

Answer 1

您可以 为<Carousel>定义处理缩放onClick事件处理程序的本地方法 ，而不是直接通过props调用方法。

然后，您可以调用其中一个传入的方法作为带有参数传递给它的方法：

在轮播中：

class Carousel extends React.Component{
  constructor(props){
    super(props);
    this.handleClick = this.handleClick.bind(this);
    // you'll need to bind this to the Carousel component in order to use 
    // this.state properly
  }

  // new onClick handler that calls the method passed in via props
  handleClick() {  
    this.props.zoomOut(this.state)
  }/

  ...  // call on onClick (in render method or wherever you have it
  onClick={this.handleClick}
  ...
}

在包含组件中，您需要修改zoomOut / zoomIn方法的定义以接受参数：

zoomOut (stateArg) { 
  // do something with the stateArg argument passed in here
  this.setState({zoom: true}) 
}

zoomIn (stateArg) { 
  // do something with the stateArg argument passed in here
  this.setState({zoom: true}) 
}

将值传递给属性函数？

1 个答案: