状态提升

1. 状态提升的作用

通常,多个组件需要反映相同的变化数据,这时我们建议将共享状态提升到最近的共同父组件中去

2. 状态提升的使用

    import React from 'react'
    class Calculator extends React.Component {
        constructor(props) {
            super(props);
            this.handleChange = this.handleChange.bind(this);
            /* 将子元素或是子组件共同使用到的state定义在共同的父级中 */
            this.state = {temperature: ''}; 
        }

        handleChange(e) {
            this.setState({temperature: e.target.value});
        }

        render() {
            const temperature = this.state.temperature;
            return (
            <fieldset>
                <legend>Enter temperature in Celsius:</legend>
                {/* input也要使用状态 */}
                <input
                    value={temperature}
                    onChange={this.handleChange} 
                />
                {/* BoilingVerdict也要使用这个数据 */}
                <BoilingVerdict
                    celsius={parseFloat(temperature)} 
                    />

            </fieldset>
            );
        }
    }

results matching ""

    No results matching ""