javascript - How to edit an element's text with React.js? -
i wanna edit p element's text when press edit button.
when click edit button, display textarea , keyed text alert can't put text p element.
what simple way react.js ?
when press edit button, editing state changing , textarea shows up.the code below.
rendernormal: function() { return ( <div> <p>edit me</p> <button onclick={this.edit}>edit</button> </div> ) }, renderform: function() { return ( <div> <textarea ref="newtext" defaultvalue="edit me"></textarea> <button onclick={this.save}>save</button> </div> ) }, render: function() { if (this.state.editing) { return this.renderform() } else { return this.rendernormal() } }
you need store , retrieve text state variable. modifying state causes re-render, display updated text. copied jsfiddle... note i've added "text" property state
var mycom = react.createclass({ getinitialstate: function() { return { editing: false, // ** initialize "text" property empty string here text: '' } }, edit: function() { this.setstate({ editing: true }) }, save: function() { var val = this.refs.newtext.value; alert(val) this.setstate({ // ** update "text" property new value (this fires render() again) text: val, editing: false }) }, rendernormal: function() { // ** render "state.text" inside <p> whether empty or not... return ( <div> <p>{this.state.text}</p> <button onclick={this.edit}>edit</button> </div> ) }, renderform: function() { return ( <div> <textarea ref="newtext" defaultvalue="edit me"></textarea> <button onclick={this.save}>save</button> </div> ) }, render: function() { if (this.state.editing) { return this.renderform() } else { return this.rendernormal() } } }) reactdom.render( <div> <mycom/> <mycom/> </div>, document.queryselector(".box") )
Comments
Post a Comment