> For the complete documentation index, see [llms.txt](https://zg-zhang.gitbook.io/note/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zg-zhang.gitbook.io/note/react/offical-website/main-concepts/lifting-state-up.md).

# 状态提示

Lifting State Up

* 通常，多个组件需要反映相同的变化数据，这时我们建议将共享状态提升到最近的共同父组件中去
* 虽然提升 state 方式比双向绑定方式需要编写更多的 “样板” 代码，但带来的好处是，排查和隔离 bug 所需的工作量将会变少

\`\`\`jsx harmony

const scaleNames = { c: 'Celsius', f: 'Fahrenheit' };

class TemperatureInput extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); }

```
handleChange(e) {
    this.props.onTemperatureChange(e.target.value)
}

render() {
    const temperature = this.props.temperature;
    const scale = this.props.scale;
    return (
        <fieldset>
            <legend>Enter temperature in {scaleNames[scale]}:</legend>
            <input
                value={temperature}
                onChange={this.handleChange}
            />
        </fieldset>
    );
}
```

}

function BoilingVerdict(props) { if (props.celsius >= 100) { return The water would boil. } return The water would not boil. }

function toCelsius(fahrenheit) { return (fahrenheit - 32) \* 5 / 9; }

function toFahrenheit(celsius) { return (celsius \* 9 / 5) + 32; }

function tryConvert(temperature, convert) { const input = parseFloat(temperature); if (Number.isNaN(input)) { return ''; } const output = convert(input); const rounded = Math.round(output \* 1000) / 1000; return rounded.toString(); }

class Calculator extends React.Component { constructor(props) { super(props); this.handleCelsiusChange = this.handleCelsiusChange.bind(this); this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this); this.state = {temperature: '', scale: 'c'}; }

```
handleCelsiusChange(temperature) {
    this.setState({scale: 'c', temperature});
}

handleFahrenheitChange(temperature) {
    this.setState({scale: 'f', temperature});
}

render() {
    const scale = this.state.scale;
    const temperature = this.state.temperature;
    const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
    const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;
    return (
        <div>
            <TemperatureInput
                scale="c"
                temperature={celsius}
                onTemperatureChange={this.handleCelsiusChange}
            />
            <TemperatureInput
                scale="f"
                temperature={fahrenheit}
                onTemperatureChange={this.handleFahrenheitChange}
            />
            <BoilingVerdict celsius={parseFloat(celsius)} />
        </div>
    );
}
```

}

\`\`\`