gpt4 book ai didi

javascript - 创建一个按钮,将输入字段的文本提交到我在 React 中的状态

转载 作者:行者123 更新时间:2023-11-30 13:44:54 24 4
gpt4 key购买 nike

我正在使用 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>
);
}

我希望答案看起来像现在这样,也许只需一两行代码即可获得解决方案。我在教程中看到过类似的事情,但没有一个是我所需要的。希望有人能提供帮助。

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

最佳答案

将 signUp 函数改成这样:

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

关于javascript - 创建一个按钮,将输入字段的文本提交到我在 React 中的状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59516882/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com