Skip to content

Instantly share code, notes, and snippets.

@litonarefin
Forked from Shelob9/Select.js
Created November 27, 2018 07:02
Show Gist options
  • Save litonarefin/785527942b0942c21260382fff26143a to your computer and use it in GitHub Desktop.
Save litonarefin/785527942b0942c21260382fff26143a to your computer and use it in GitHub Desktop.
Gutenberg React state example
constructor( props ) {
super( ...props );
this.selectCallback = this.selectCallback.bind(this);
this.state = {
current_editing: 'The bold attribute has NOT been changed',
change_time: 0
}
}
const { __ } = wp.i18n;
const { Component } = wp.element;
const el = wp.element.createElement;
export default class Select extends Component {
constructor( props ) {
super( ...props );
this.selectCallback = this.selectCallback.bind(this);
this.state = {
current_editing: 'The bold attribute has NOT been changed',
change_time: 0
}
}
selectCallback(event){
this.setState({change_time: this.state.change_time+=1 });
this.setState({current_editing: 'The bold attribute HAS been changed ' + this.state.change_time + ' times'});
this.props.changeHandler(event);
}
render() {
return el(
'div',
{},
[
el(
'div',
{},
this.state.current_editing,
),
el(
'select',
{
onChange: this.props.changeHandler,
id: this.props.id,
value: this.props.value
},
[
el(
'option',
{
value: 'true'
},
__( 'Bold On', 'text-domain' )
),
el(
'option',
{
value: 'false'
},
__( 'Bold Off', 'text-domain' )
)
]
)
]
)
}
}
selectCallback(event){
this.setState({change_time: this.state.change_time+=1 });
this.setState({current_editing: 'The bold attribute HAS been changed ' + this.state.change_time + ' times'});
this.props.changeHandler(event);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment