Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- class AppButton extends Component {
- setOnClick() {
- if(!this.props.onClick && typeof this.props.onClick == 'function') {
- this.props.onClick=function(){ alert("Hello"); }
- }
- }
- setMessage() {
- if(!this.props.message){
- this.props.message="Hello"
- }
- }
- render(){
- this.setOnClick()
- this.setMessage()
- return (
- <button onClick={this.props.onClick}>{this.props.message}</button>
- )
- }
- }
- class App extends Component {
- render() {
- return (
- <AppButton onClick={function(){ alert('Test Alert') } } message="My Button" />
- <AppButton />
- );
- }
- }
- this.props.message="Hello"
- {
- "name": "sample",
- "version": "0.1.0",
- "private": true,
- "dependencies": {
- "react": "^15.5.4",
- "react-dom": "^15.5.4"
- },
- "devDependencies": {
- "react-scripts": "1.0.7"
- },
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test --env=jsdom",
- "eject": "react-scripts eject"
- }
- }
- import PropTypes from 'prop-types';
- class AppButton extends Component {
- render(){
- return (
- <button onClick={this.props.onClick}>{this.props.message}</button>
- )
- }
- };
- AppButton.propTypes = {
- message: PropTypes.string,
- onClick: PropTypes.func
- };
- AppButton.defaultProps = {
- message: 'Hello',
- onClick: function(){ alert("Hello"); }
- };
- return (
- <button onClick={this.props.onClick}>{this.props.message || "Default text"}</button>
- );
- this.setState({message: 'your message'});
- {this.state.message}
- constructor(props){
- super(props);
- this.state = {
- message: ''
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement