转换ng-click代码以反应组件

Question

我有以下按钮与ng-click

<button ng-click="productClass.saveProductMehod()">Save</button>

我尝试将其转换为React

<button-component on-submit="productClass.saveProductMehod"
   value="'Save'"></button-component> 

同

class ButtonComponent extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.props.onSubmit();
  }

  render() {
    return (
        <button onClick={this.handleClick}>
            {this.props.value}
        </button>
    );
  }
}

ButtonComponent.propTypes = {
  value: PropTypes.string.isRequired,
  onSubmit: PropTypes.func.isRequired,
};

export { ButtonComponent }

ProductClass

class ProductClass {
   saveProductMehod() {
      this.submitted = true;
      //save the product
   }
}

这里的问题是当我点击按钮时，我从this的构造函数中松开ProductClass初始化，当它进入saveProductMethod时，这是道具对象。我错过了什么？

Answer 1

这里遗漏了几件：

<button-component on-submit="productClass.saveProductMehod"
   value="'Save'"></button-component> 

应该是（注意保存周围的引号和onSubmit上的引号，以及案例）：

<ButtonComponent onSubmit={productClass.saveProductMehod}
   value="Save"></ButtonComponent> 

Answer 2

让我们假设您的角度ng-click为：

<button ng-click="onClick()">Save</button>

类似的反应组件（无状态形式）将是：

const ReactButton = props =>(<button onClick={props.onClick} value={props.value}/>)

类似的反应组件（基于类的表格）将是：

class ReactButton extends React.Component{
 render(){
   return(<button 
             onClick={this.props.onClick} 
             value={this.props.value}/>)
 }
}

这个ReactButton的用法：

而已！

要记住的重点：

1. 自定义组件遵循惯例，它们以Capital Alphabet开头并遵循camel case语法。
2. JSX就像html一样。只有class - > className。
3. 每个组件名称都应该是有效的JS变量

Answer 3

必须将新方法绑定到控制器才能访问预定义的属性：

this.saveProductMehod = this.saveProductMehod.bind(this);