Question

我正在尝试传递两个功能，但无法正常工作。这是我的尝试

ChildComponent.js

render(
  let val = -1
    return(

<div>
     <Button onClick={this.props.handelSecondClick} >second button click</Button>
     <Button onClick={this.props.handelFirstClick} >First button click</Button>
</div>
)
)

App.js

this.state = {
   data: [1,2]
}

handelFirstClick(val){
   alert("first button clicked")
   let data = this.state.data
   data[0] = val

   this.setState({data})
}

handelSecondClick(val){
   alert("second button clicked")
   let data = this.state.data
   data[1] = val

   this.setState({data})
}


render(

   return(
   < ChildComponent onClick={this.handelSecondClick(val)} onClick={this.handelFirstClick(val)} 
   )
/>
)

是否甚至可以传递两个函数？在子组件上，我正在创建两个按钮，两个分别处理两种方法。我应该如何修改，以便两个子组件都传递两个函数？

Answer 1

创建2个不同的功能。

您还错过了绑定这些功能的机会。使用箭头功能或绑定方法。

< ChildComponent value={val}
handleSecondClick={() => this.handelSecondClick(val)} 
handleFirstClick={()=> this.handelFirstClick(val)} 
/>

您可以通过

访问它

this.props.handleSecondClick(this.props.value)
this.props.handleFirstClick(this.props.value)

Answer 2

您必须发送2个不同的道具才能处理多次点击。做类似的事情

<ChildComponent firstClick={this.handleFirstClick.bind(this, val)} secondClick={this.handleSecondClick.bind(this, val)} />

handleFirstClick(val){...}
handleSecondClick(val){...}

在您的子组件中，访问它们的方式为

render(){
  return(
    <Button onClick={this.props.firstClick}>Button 1</Button>
    <Button onClick={this.props.secondClick}>Button 2</Button>
  )
}

Answer 3

容易解决的问题

ChildComponent.js

render(
    return(

<div>
     <Button onClick={this.props.onFirstClick} >second button click</Button>
     <Button onClick={this.props.onSecondClick} >First button click</Button>
</div>
)
)
App.js

this.state = {
   data: [1,2]
}

handelFirstClick(){
   alert("first button clicked")
   let data = this.state.data
   data[0] = -1

   this.setState({data})
}

handelSecondClick(){
   alert("second button clicked")
   let data = this.state.data
   data[1] = -1

   this.setState({data})
}


render(
   return(
   < ChildComponent onSecondClick={this.handelSecondClick} onFirstClick={this.handelFirstClick} 
   )
/>
)

此外，如果道具确实起作用，则建议对onclick进行检查，否则会引发错误。试试

onFirstClick = () => {
 const {onFirstClick } = this.props;
 if (typeof onFirstClick === 'function') {
    onFirstClick();
 }
}
render(
    return(

<div>
     <Button onClick={this.onFirstClick} >second button click</Button>
     <Button onClick={this.onSecondClick} >First button click</Button>
</div>
)
)

Answer 4

您应该对对象进行破坏

App.js

render() {
  return(
   < ChildComponent func1={this.handelSecondClick} func2={this.handelFirstClick} />
  )
 }

ChildComponent .js

render() {
  const {func1, func2} = this.props
  return(
   <Button onClick={() => func1(val)} >second button click</Button>
   <Button onClick={() => func2(val)} >First button click</Button>
  )
 }

Answer 5

组件中有两个按钮，您可以将两个功能作为道具传递给组件，并在按钮上添加onClick方法，例如：-

return(

<div>
     <Button onClick={this.props.function2} >second button click</Button>
     <Button onClick={this.props.function1} >First button click</Button>
</div>
)

，然后在组件中可以编写为：-

< ChildComponent function1={this.handelFirstClick()} function2={this.handelSecondClick()} />

希望这会有所帮助！

如何将两个函数传递给子组件

5 个答案: