javascript - 将输入绑定反应到状态与局部变量
问题描述
我正在查看用于绑定输入以响应状态的教程。我不明白为什么我需要将它绑定到状态而不是本地变量,因为它不会导致渲染。
就我而言,我有一个登录表单,在教程中它是发送消息表单。这个想法是使用反向数据流在提交时将值发送到 App.js(parent)。它看起来像这样:
class Login extends Component{
constructor(){
super()
this.state = {
username: ''
};
this.login = this.login.bind(this)
this.handleChange = this.handleChange.bind(this)
}
handleChange(e) {
this.setState({
username: e.target.value
});
}
//here I make a post request and then I set the user in app.js
handleSubmit(e) {
e.preventDefault();
fetch('http://localhost:8080/login', {
method: 'post',
body: JSON.stringify(username)
}).then(data => data.json())
.then(data => {
this.props.setUser(data)
this.setState({
username: ''
})
}
}
render(){
return (
<section>
<form onSubmit={this.submit}>
<input placeholder="username"
onChange={this.changeInput} type="text"
value={this.state.username}/>
</form>
</section>
)
}
是否有理由使用 setState 而不是仅使用不会导致渲染的局部变量?
解决方案
您不必这样做,您可以在不将用户名存储在状态中的情况下使其工作。您所要做的就是监听提交事件并使用 ref 获取当时的输入值。
class Login extends Component {
handleSubmit(e) {
e.preventDefault();
console.log(this.refs.username.value)
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input ref="username" type="text" />
<button type="submit">Submit</button>
</form>
);
}
});
然而,使用 React 执行此操作的常用方法是将输入值存储在状态中,并在每次值更改时更新状态。这称为受控组件,它确保输入值和状态始终彼此一致。
class Login extends Component {
constructor() {
super()
this.state = {
username: ''
};
}
handleChange(e) {
this.setState({
username: e.target.value
});
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input onChange={e => this.setState({ username: e.target.value })} type="text" value={this.state.username} />
<button type="submit">Submit</button>
</form>
</div>
)
}
}
除其他外,它使验证输入值或在需要时对其进行修改变得更容易。例如,您可以通过在状态更改时将状态转换为大写来强制使用大写。
推荐阅读
- c# - 通过移动其 X 和 Z 位置,使沿 Y 轴移动的对象在某个点上保持静止
- algorithm - 绘制给定区域的像素圆
- .htaccess - 使公共域名只能从内部网络访问
- python - ImportError:没有名为 build_lib 的模块
- php - 跳过数据库中存在的实体
- javascript - 为什么 nvm (for windows) 不工作,并且无论何时运行它都会给出错误消息?
- html - 如何处理邮件签名中的动态图像
- sql - 如何将 ISNULL() 函数与 join 一起使用
- c++ - 从另一个文件夹配置时,Automake 使用源的绝对路径
- python-3.x - 当在 ODOO 12 中创建模型 B 的新实例(模型 A 具有 many2one 字段)时,如何更改模型 A 中的布尔值?