javascript - 在句柄更改时通过状态响应传递值
问题描述
我正在尝试对登录页面使用两种方法,handleChange 和 handleSubmit。我试图在 state 中为用户名和密码设置两个值,每当表单的输入被修改时更新 state 中的值,然后使用存储在 state 中的值提交。但是,我的值在打印到控制台时返回未定义。(ps 我知道我仍然需要为所有安全专家加密密码)。
我是新手,所以我的逻辑可能有问题:
登录.js
export default class Login extends React.Component {
constructor(props) {
super(props);
this.state = {uname: '', password: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({uname: event.target.uname, password: event.target.password});
}
handleSubmit(event) {
alert('A username and password was submitted: ' + this.state.uname + this.state.password);
event.preventDefault();
fetch('https://localhost:8080/login', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
uname: this.state.uname,
password: this.state.password,
})
});
}
render() {
return (
<div>
<Header titleName={"Login"}>
<div className="container">
<div className="card"/>
<div className="card">
<h1 className="title">Login</h1>
<form onSubmit={this.handleSubmit}>
<div className="input-container">
<input name="uname" type="text" value={this.state.uname} id="#uname" required="required"
onChange={this.handleChange}/>
<label form="#unamelabel">Username</label>
<div className="bar"/>
</div>
<div className="input-container">
<input name="password" type="password" value={this.state.password} id="#pass" required="required"
onChange={this.handleChange}/>
<label form="#passlabel">Password</label>
<div className="bar"/>
</div>
<div className="button-container">
<button type="submit" value="Submit"><span>Go</span></button>
</div>
<div className="footer"><a href="#">Forgot your password?</a></div>
</form>
</div>
</div>
</Header>
<Footer/>
</div>
);
}
}
解决方案
用这个替换手柄变化
handleInputChange(event) {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
[name]: value
});
}
您需要将输入的值设置为状态,而不是输入的名称
推荐阅读
- visual-studio-code - MX Master 3 - VS Code 中的 Command + Tab Shortcup
- flutter - 处理 JSON 时改造 Dart 异常
- single-sign-on - 在基于 SSO 的应用程序中管理多个 SP(服务提供商)的角色
- javascript - Heroku 上的 Rails 应用程序加载 Javascript,但 JS 函数未运行
- kotlin - 列表排序和获取元素
- reactjs - 将两个独立的 React 应用程序合并为一个
- javascript - R Shiny - 数据表中的子行(行数据未呈现)
- gdb - Debugging llvm with gdb but can't find source code
- svelte - How to pass parameters to on:click in Svelte?
- r - How to extract text between two words using str_extract?