reactjs中的可重用组件

-1

尝试发送一个按钮时父组件上的按钮被点击父组件时 - 我如何使用从子组件中获取的值调用父组件中的函数：在父组件中，我是试图做这样的事情：reactjs中的可重用组件

家长：

<BtnToggle currentColor={this.state.activeColor} onClick={() => this.setColorBtn(this.state.setActColor)}/> 

setActColor(color) { 
    console.log(btnName+"parent"); 
}

子组件：

class BtnToggle extends Component { 

setActColor(color) { 
    console.log(color); 
    this.props.onClick(color); 
    }  

render() { 
      return (
       <span className="group"> 
       <button ref={(color) => { this.red = color; }} onClick={() => this.setActColor('red')} className={`btn-element ${(this.props.activeColor === 'red') ? 'btn-active' : ''}`}>Red</button> 
       <button ref={(color) => { this.blue = color; }} onClick={() => this.setActColor('blue')} className={`btn-element ${(this.props.activeColor === 'blue') ? 'btn-active' : ''}`}>Blue</button> 
       </span> 
      ); 
      } 
     } 

     export default BtnToggle;

来源

2016-12-05 monkeyjs

不能清楚地告诉你，究竟需要什么？ –

@JyothiBabuAraja更新了问题。 – monkeyjs

@JyothiBabuAraja：基本上当我试图从子组件调用函数时，我需要传递颜色（红/蓝） - 我如何将它传递给父函数 - 具有一些附加功能 - 哪个子组件不需要打扰.. – monkeyjs

如果我没有错，你正试图更新active按钮状态从小孩到家长component。以下代码将解决您实施从child到parent的数据流，反之亦然。

孩子

class BtnToggle extends Component { 

    setActColor(color) { 
    console.log(color); 
    this.props.onClick(color); 
    } 

    render() { 
    return (< span className = "group" > 
     <button onClick = {this.setActColor('red')} className = {`btn-element ${(this.props.activeColor === 'red') ? 'btn-active' : ''}`} > Red < /button> 
     <button onClick = {this.setActColor('blue')} 
     className = {`btn-element ${(this.props.activeColor === 'blue') ? 'btn-active' : ''}`} > Blue < /button> 
     < /span> 
    ); 
    } 
}

父

class Parent extends React.Component{ 

    constructor(props){ 
    super(props); 
    this.state = { 
    activeColor: "red" //initial active state (color) 
    } 
    } 

    setActColor(color) { 
    console.log(color); 
    this.setState({ 
     activeColor: color //this gets params from child component 
    }); 
    } 

    render(){ 
    return (
     <BtnToggle activeColor={this.state.activeColor} onClick={this.setActColor}/> 
    ) 
    } 

}

来源

2016-12-05 07:41:29

如果我的理解是不错的，你想从孩子送到一个参数去父母。因此，如果有人setActColor功能从子从父setActColor函数调用的setColor函数，并传递一个参数去叫......

你可以这样说：

这里是fiddle。

来源

2016-12-05 08:18:00 Boky

reactjs中的可重用组件

回答

相关问题