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 Demo

我之所以包含它，是因为 forceUpdate（）在像您这样的情况下非常有用，其中组件中更新的数据是伪随机生成器的结果。由于您的优先级是模拟更新组件状态或道具数据的随机行为，因此 forceUpdate（）可以更简洁地重新呈现此特定更新。

来自React's Component API Documentation：

如果你的render（）方法从this.props或this.state以外的地方读取，你需要通过调用forceUpdate（）来告诉React何时需要重新运行render（）。

public class Calcul {

    public static void average(int[] array) {
        //do your job here
    }
    public static void main (String[] args) {
        Calcul calc = new Calcul();
        int j = Integer.parseInt(JOptionPane.showInputDialog(null, "Please insert how many you wanted to calculate :")); 
        double arr[] = new double[j]; 
        for (int i=0; i<j; i++) { 
             arr[i] = Double.parseDouble(JOptionPane.showInputDialog(null, "Please insert the value : ")); 
        } 
        //here's how to call your method.
        double result = calc.average(arr); 
    }
}

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（）将始终触发重新渲染

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

2 个答案: