reactjs 中的可重用组件

Question

尝试在单击子组件上的按钮时将参数发送到父组件 - 如何使用从子组件获取的值调用父组件中的函数：在父组件中，我试图做这样的事情：

家长：

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

Answer 1

如果我没记错的话，您正在尝试将 active 按钮状态从 child 更新为 parent component。下面的代码将解决您实现从 child 到 parent 和 vice-versa.

的数据流

child

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

parent

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

}

Answer 2

如果我没看错的话，你是在尝试将参数从 child 发送到 parent。因此，如果有人从 child 调用 setActColor 函数，那么 setActColor 函数会从 parent 调用 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'));

这里是fiddle.

reactjs 中的可重用组件

Re-usable component in reactjs

reactjs

react-jsx