Javascript 创建提交输入字段的按钮'；在React中将文本发送到我的状态

我正在使用React构建Reddit的简单克隆。现在，我正在创建一个按钮，让用户登录该网站。按钮的

onClick

事件需要触发一个函数，该函数获取输入字段的值并将该值存储在状态中。我确信它的实现非常简单，但我还没有弄明白

我试过阅读文档和谷歌搜索（大部分是StackOverflow链接），但还没有找到答案

以下是我的一些代码片段：

class App extends Component {
    state = {
        username: "",
        loggedIn: false
    }

    signUp = () => {
        this.setState({ loggedIn: !this.state.loggedIn });
    };

    handleChange = event => {
        this.setState({
            username: event.target.value
        });
    };

// ... things have been excluded ...

    render() {
        return (
            <div className="App">
                <div className="Header">
                    <p className="Logo">Reddit Clone</p>
                    {this.state.loggedIn ? null : (
                        <div style={{ float: "right" }}>
                            <input
                                type="text"
                                name="Username"
                                onChange={this.handleChange}
                            ></input>
                            <button onClick={this.signUp}>Sign Up</button>
                        </div>
                    )}
                </div>
                <div style={{ margin: "20px" }}>{threads}</div>
                {postBox}
            </div>
        );
    }

类应用程序扩展组件{
状态={
用户名：“”，
洛格丁：错
}
注册=（）=>{
this.setState（{loggedIn:！this.state.loggedIn}）；
};
handleChange=事件=>{
这是我的国家({
用户名：event.target.value
});
};
//…事情被排除在外。。。
render（）{
返回(
Reddit克隆

{this.state.loggedIn？空：(
注册
)}
{threads}
{postBox}
);
}

我希望答案看起来和现在一样，可能只有一两行代码来获得解决方案。我在教程中看到过类似的事情，但没有一件是我需要的。希望有人能帮我

---

同样，我基本上希望“注册”按钮将相邻输入字段的文本值传输到我的状态，以便我以后可以使用该信息。

将注册功能更改为：

signUp = (e) => {
e.preventDefault() //its for preventing browser refreshing the page by default
            this.setState({ loggedIn: !this.state.loggedIn,
                             username:this.state.username
 });
        };

---

将注册功能更改为：

signUp = (e) => {
e.preventDefault() //its for preventing browser refreshing the page by default
            this.setState({ loggedIn: !this.state.loggedIn,
                             username:this.state.username
 });
        };

---

如前一条评论所述，在组件中的按钮触发onClick函数后，您的状态将同时为username和loggedIn。出于测试目的，请添加此代码并查看状态

componentDidUpdate(){
  console.log(this.state)
}

---

temporay

如前一条评论所述，在组件中的按钮触发onClick函数后，您将同时拥有username和loggedIn状态。出于测试目的，添加此代码并观察状态

componentDidUpdate(){
  console.log(this.state)
}

---

temporay

您已经有username的值处于状态。

this.state.username

有您的用户值和组件中存在的输入框您已经有username的值处于状态。

this.state.username

有您的用户值和组件中存在的输入框