Advertisement
Guest User

Untitled

a guest
Jun 18th, 2019
72
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.66 KB | None | 0 0
  1. class AppButton extends Component {
  2.  
  3. setOnClick() {
  4. if(!this.props.onClick && typeof this.props.onClick == 'function') {
  5. this.props.onClick=function(){ alert("Hello"); }
  6. }
  7. }
  8.  
  9. setMessage() {
  10. if(!this.props.message){
  11. this.props.message="Hello"
  12. }
  13. }
  14.  
  15. render(){
  16. this.setOnClick()
  17. this.setMessage()
  18. return (
  19. <button onClick={this.props.onClick}>{this.props.message}</button>
  20. )
  21. }
  22. }
  23.  
  24. class App extends Component {
  25. render() {
  26. return (
  27. <AppButton onClick={function(){ alert('Test Alert') } } message="My Button" />
  28. <AppButton />
  29. );
  30. }
  31. }
  32.  
  33. this.props.message="Hello"
  34.  
  35. {
  36. "name": "sample",
  37. "version": "0.1.0",
  38. "private": true,
  39. "dependencies": {
  40. "react": "^15.5.4",
  41. "react-dom": "^15.5.4"
  42. },
  43. "devDependencies": {
  44. "react-scripts": "1.0.7"
  45. },
  46. "scripts": {
  47. "start": "react-scripts start",
  48. "build": "react-scripts build",
  49. "test": "react-scripts test --env=jsdom",
  50. "eject": "react-scripts eject"
  51. }
  52. }
  53.  
  54. import PropTypes from 'prop-types';
  55.  
  56. class AppButton extends Component {
  57. render(){
  58. return (
  59. <button onClick={this.props.onClick}>{this.props.message}</button>
  60. )
  61. }
  62. };
  63.  
  64. AppButton.propTypes = {
  65. message: PropTypes.string,
  66. onClick: PropTypes.func
  67. };
  68.  
  69. AppButton.defaultProps = {
  70. message: 'Hello',
  71. onClick: function(){ alert("Hello"); }
  72. };
  73.  
  74. return (
  75. <button onClick={this.props.onClick}>{this.props.message || "Default text"}</button>
  76. );
  77.  
  78. this.setState({message: 'your message'});
  79.  
  80. {this.state.message}
  81.  
  82. constructor(props){
  83. super(props);
  84.  
  85. this.state = {
  86. message: ''
  87. }
  88. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement