单击按钮时页面更新（reactjs）

Question

假设我想在单击按钮后再次呈现页面。 我该怎么做？ 特别是单击按钮时，如何更改程序以生成随机文本？

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);
        for (var i=0; i < 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/

请注意，我们不想在页面中看到前面的元素。

Answer 1

在大多数情况下，Jean的答案是更新组件数据的最佳正确方法。 话虽如此，下面的代码也可以完成您想要的。

JSFiddle演示

之所以要包含它，是因为forceUpdate（）在像您这样的情况下很有用，因为您的组件中正在更新的数据是psuedorandom生成器的结果。 由于您的优先级是模拟随机行为，而不是更新组件状态或prop数据，因此forceUpdate（）可以是使此特定更新重新呈现的一种更简洁的方法。

来自React的Component API文档 ：

如果您的render（）方法从this.props或this.state之外的其他内容中读取内容，则需要通过调用forceUpdate（）来告知React何时需要重新运行render（）。

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);
        for (var i=0; i < 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'));

Answer 2

实际上，为什么不使用setState和getInitialState呢 ？

var colors = ['red', 'yellow', 'blue', 'green']; 
var Hello = React.createClass({

    getInitialState() {
        return {
            text: []
        }
    },

    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);
        for (var i=0; i < num; i++) {
            rows.push(this.randomText(color));
        }
        this.setState({text: rows});
    }, 
    handleSubmit() { 
        this.randomNumberOfRandomText();
    }, 
    render: function() {
        return  ( <div>  
            <section>
            <button onClick={this.handleSubmit.bind(this)}>Generate new random texts! </button>
        </section>
        <div>{this.state.text}</div> 
       </div>);
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));

我更新jsfiddle 。

当您单击handleSubmit（）时 ，将执行randomNumberOfRandomText（），同时更新元素的状态。

setState（）将始终触发重新渲染