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;

this.setColorBtn（this.state.setActColor）}/>
setActColor（颜色）{
console.log（btnName+“父级”）；
}

子组件：

<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;

类BtnToggle扩展组件{
setActColor（颜色）{
控制台。日志（颜色）；
this.props.onClick（颜色）；
}      
render（）{
返回(
{this.red=color；}}}onClick={（）=>this.setActColor（'red'）}className={`btn element${（this.props.activeColor=='red'）？'btn active'：''}}}>red
{this.blue=color；}}}onClick={（）=>this.setActColor（'blue'）}className={`btn element${（this.props.activeColor=='blue'）？'btn active'：''}}}>blue
);
}
}
导出默认BTN切换；

如果我没说错，您正在尝试将

活动

按钮状态从子项更新到父项

组件

。下面的代码将说明如何实现从

子级

到

父级

的数据流，反之亦然

儿童

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>
    );
  }
}

类BtnToggle扩展组件{
setActColor（颜色）{
控制台。日志（颜色）；
this.props.onClick（颜色）；
}
render（）{
返回（
红色
蓝色

);
}
}

家长

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}/>
    )
  }

}

类父级扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
activeColor:“红色”//初始活动状态（颜色）
}
}
setActColor（颜色）{
控制台。日志（颜色）；
这是我的国家({
activeColor:color//这从子组件获取参数
});
}
render（）{
返回(
)
}
}

如果我理解得很好，那么您正试图将一个参数从child发送给一个parent。因此，如果有人从子函数调用setActColor函数，则setActColor函数从父函数调用setColor函数并向其传递参数

您可以这样做：

class BtnToggle extends React.Component { 

setActColor(color, event) {
    this.props.setColor(color)
  }      

render() {
            return (
              <span className="group">
                <button onClick={this.setActColor.bind(this, "red")}>Red</button>
                <button onClick={this.setActColor.bind(this, "blue")}>Blue</button>
              </span>
            );
  }
}

class Test extends React.Component {
        setColor(color){
            alert(color);
    }

        render(){
        return <BtnToggle setColor={this.setColor.bind(this)}/>
    }
}

React.render(<Test />, document.getElementById('container'));

类BtnToggle扩展了React.Component{
setActColor（颜色、事件）{
this.props.setColor（颜色）
}      
render（）{
返回(
红色
蓝色
);
}
}
类测试扩展了React.Component{
设置颜色（颜色）{
警报（颜色）；
}
render（）{
返回
}
}
React.render（，document.getElementById（'container'）；

---

这是。

我不能清楚地告诉你，到底需要什么？@JyothiBabuAraja更新了这个问题。@JyothiBabuAraja：基本上，当我试图从子组件调用函数时，我需要输入颜色（红色/蓝色）-如何将其传递给父级中的函数-该函数具有一些附加功能-哪个子组件不需要担心。。