React - 处理表单数据

Question

我刚开始使用React进行编码。我有一个与处理表单数据有关的问题。在某些示例中，数据处于组件状态：

this.state = {
    username: '',
    password: ''
}

如果我将所有表单数据都放在组件状态中，我的一位朋友告诉我，数据不安全（可以使用React开发人员工具轻松查看所有组件状态）。

我真的很困惑。

我写了下面的代码。我已将用户名和密码移出组件。

let formFields = {
    username: '',
    password: ''
};

export default class LoginComponent extends React.Component {

    constructor() {
        super();

        this.state = {
            error: {
                username: false,
                password: false
            }
        };
    }

    render() {
        return (
            <div className="mp-form">
                <form>
                    <div className="field-wrap">
                        <input type="text" placeholder="USERNAME" onChange={event => handleEvent.call(this, 'username', event.target.value)} />
                        <span style={{
                            display: this.state.error.username === true ? 'block' : 'none'
                        }}>Please enter UserName</span>
                    </div>
                    <div className="field-wrap">
                        <input type="password" placeholder="PASSWORD" onChange={event => handleEvent.call(this, 'password', event.target.value)} />
                        <span style={{
                            display: this.state.error.password === true ? 'block' : 'none'
                        }}>Please enter Password</span>
                    </div>
                    <div className="field-wrap">
                        <input type="button" value="Cancel" />
                        <input type="button" value="Create" />
                    </div>
                </form>
                <p>Don't have an account yet? Register here</p>
            </div>
        );
    }
}

function handleEvent(type, value, context) {

    if (type === 'username') {
        formFields.username = value;
    }
    else if (type === 'password') {
        formFields.password = value
    }
    console.log(type, value);
    var userNameStatus = formFields.username.length === 0 ? true : false;
    var passwordStatus = formFields.password.length === 0 ? true : false;

    this.setState({
        error: {
            username: userNameStatus,
            password: passwordStatus
        }
    });
}

通过验证处理表单数据的最佳做法是什么？