javascript - Page update when clicking a button (reactjs) -
suppose want render page again, after clicking button. how can accomplish it? in particular how change program generate random texts, when clicking button?
var colors = ['red', 'yellow', 'blue', 'green']; var hello = react.createclass({ randomtext(color) { var style = { color: colors[color], } return ( <h1 style={style}> random text </h1> ); }, randomnumberofrandomtext() { var color = math.floor((math.random() * 5)); var rows = []; var num = math.floor((math.random() * 5) + 1); (var i=0; < num; i++) { rows.push(this.randomtext(color)); } return <div> {rows} </div>; }, handlesubmit() { }, render: function() { return ( <div> <section> <button onclick={this.handlesubmit.bind(this)}>generate new random texts! </button> </section> {this.randomnumberofrandomtext()} </div>); } }); react.render(<hello name="world" />, document.getelementbyid('container')); https://jsfiddle.net/danyaljj/rvlow09s/
note don't want see previous elements in page.
in circumstances, jean's answer best proper way update component's data. said, code below accomplishes want well.
the reason i'm including because forceupdate() can useful in cases yours data updating in component result of psuedorandom generator. since priority simulating random behavior on updating component state or prop data, forceupdate() can cleaner way make particular update re-render itself.
from react's component api documentation:
if render() method reads other this.props or this.state, you'll need tell react when needs re-run render() calling forceupdate().
var colors = ['red', 'yellow', 'blue', 'green']; var hello = react.createclass({ randomtext(color) { var style = { color: colors[color], } return ( <h1 style={style}> random text </h1> ); }, randomnumberofrandomtext() { var color = math.floor((math.random() * 5)); var rows = []; var num = math.floor((math.random() * 5) + 1); (var i=0; < num; i++) { rows.push(this.randomtext(color)); } return <div> {rows} </div>; }, handlesubmit(e) { e.preventdefault(); this.forceupdate(); }, render: function() { return ( <div> <section> <button onclick={this.handlesubmit.bind(this)}>generate new random texts! </button> </section> {this.randomnumberofrandomtext()} </div>); } }); react.render(<hello name="world" />, document.getelementbyid('container')); 
Comments
Post a Comment