javascript - 当我在 React.js 中更改活动选项卡时，如何防止状态数据被清除？

Question

我的标签有一个不同的子组件。首先，我打开FirstTab并填充输入区域。然后我打开SecondTab并填写他们的输入区域。

然后，当我返回时FirstTab，状态数据被清除。如何防止清除我的数据？

我的主页

import { React, Component } from 'react';
import Tabs, { Tab } from 'react-awesome-tabs';
import "../node_modules/react-awesome-tabs/dist/react-awesome-tabs.css"
import FirstTab from './FirstTab';
import SecondTab from './SecondTab';
export class Simple extends Component {
    constructor(props) {
        super(props);
        this.state = {
            activeTab: 0
        };
        this.tabs = [
            {
                title: 'Tab1',
                content: <FirstTab />
            },
            {
                title: 'Tab2',
                content: <SecondTab />
            },
        ];
    }
    tabs = [];
    handleTabSwitch(active) {
        this.setState({ activeTab: active });
    }
    render() {
        return (
            <div className="App" style={{
                height: '100%', width: '100%',
                backgroundPosition: 'center',
                backgroundRepeat: 'no-repeat',
                marginTop: '-0.5%',
                backgroundSize: 'cover',
                minHeight: '100%',
                position: 'absolute',
                flex: 1,
                opacity: 1
            }}>
                <Tabs
                    active={this.state.activeTab}
                    onTabSwitch={this.handleTabSwitch.bind(this)}
                    draggable={true}
                    showAdd={true}
                >
                    {
                        this.tabs.map((value, index) => {
                            return (
                                <Tab
                                    key={index}
                                    title={value.title}
                                    showClose={true}
                                >
                                    {value.content}
                                </Tab>
                            );
                        })
                    }
                </Tabs>
            </div>
        );
    }
}
export default (Simple)

我的第一个标签

import React, { Component } from 'react';
class FirstTab extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "",
        };
    }
    ChangeName(e){
        this.setState({name: e.target.value})
    }
    render() {
       
        const labelStyle = {
            borderWidth: '1px',
            borderColor: '#f0f0f0',
            borderRadius: 3,
            width: '15%',
            height: '20px',
            color: "black",
            float: "left",
            marginLeft: "5%",
            textAlign: "left",
            backgroundColor: "transparent",
            overflow: "hidden"
        }
        const inputStyle = {
            boxShadow: '1px 1px 5px #aeaeae',
            borderWidth: '1px',
            borderColor: '#f0f0f0',
            borderRadius: 3,
            width: '35%',
            marginLeft: "5%",
            height: '20px',
            float: "left",
        }
        const textareaStyle = {
            boxShadow: '1px 1px 5px #aeaeae',
            borderWidth: '1px',
            borderColor: '#f0f0f0',
            borderRadius: 3,
            width: '35%',
            marginLeft: "5%",
            height: '20px',
            float: "left",
        }
        const divStyle ={
            width: "50%", 
            float: "center",
             display: "block",
              margin:"auto",
              marginTop: "2%",
        }
        return (
            <div >
                <div style={divStyle}>
                    <label style={labelStyle} htmlFor='uyeNo' >Name: </label>
                    <input style={inputStyle} onBlur={(e)=>{this.ChangeName(e)}} type='text' />
                    <textarea style={textareaStyle}  value={this.state.name} />
                    <br></br>
                </div>
            </div>
        );
    }
}
export default (FirstTab)

我的第二个标签

import React, { Component } from 'react';
class SecondTab extends Component {
    constructor(props) {
        super(props);
        this.state = {
            surName: "",
        };
    }
    ChangeName(e) {
        this.setState({ surName: e.target.value })
    }
    render() {
        const labelStyle = {
            borderWidth: '1px',
            borderColor: '#f0f0f0',
            borderRadius: 3,
            width: '15%',
            height: '20px',
            color: "black",
            float: "left",
            marginLeft: "5%",
            textAlign: "left",
            backgroundColor: "transparent",
            overflow: "hidden"
        }
        const inputStyle = {
            boxShadow: '1px 1px 5px #aeaeae',
            borderWidth: '1px',
            borderColor: '#f0f0f0',
            borderRadius: 3,
            width: '35%',
            marginLeft: "5%",
            height: '20px',
            float: "left",
        }
        const textareaStyle = {
            boxShadow: '1px 1px 5px #aeaeae',
            borderWidth: '1px',
            borderColor: '#f0f0f0',
            borderRadius: 3,
            width: '35%',
            marginLeft: "5%",
            height: '20px',
            float: "left",
        }
        const divStyle = {
            width: "50%",
            float: "center",
            display: "block",
            margin: "auto",
            marginTop: "2%",
        }
        return (
            <div >
                <div style={divStyle}>
                    <label style={labelStyle} htmlFor='uyeNo' >Name: </label>
                    <input style={inputStyle} onBlur={(e) => { this.ChangeName(e) }} type='text' />
                    <textarea style={textareaStyle} value={this.state.surName} />
                    <br></br>
                </div>
            </div>
        );
    }
}
export default (SecondTab)

我的真实项目每个子组件都有 35-40 个输入数据。 另外：如果我在第二次单击选项卡时阻止在子组件中渲染，也许我可以阻止我的状态数据重新清除..但是如何防止第二次渲染？