javascript - onChage 多个输入
问题描述
我有 Django Rest Framework 后端,我正在尝试通过 React 在那里发布数据。获取数据工作正常。如果我尝试仅使用一个输入发布数据,它也可以正常工作。但是当我尝试添加更多输入时,它不起作用,我不知道如何处理多个输入..
反应代码:
class Activity2project extends React.Component {
constructor(props) {
super(props);
this.state = {
virtualProjectList:[],
activeItem:{
id:null,
project_name:'',
project_name_RnD:'',
},
this.handleSubmit = this.handleSubmit.bind(this)
this.handleChange = this.handleChange.bind(this)
this.fetchVirtualProjects = this.fetchVirtualProjects.bind(this)
}
handleChange(e){
var name = e.target.name
var value = e.target.value
this.setState({
activeItem:{
...this.state.activeItem,
project_name:e.target.value,
project_name_RnD:e.target.value,
}
})
}
render(){
<div>
<input onChange={this.handleChange} type='text' id='virtual_project' name='virtual_project_name' value={this.state.activeItem.project_name} placeholder='Project Name' ></input>
<input onChange={this.handleChange} type='text' id='virtual_project_RnD' name='virtual_project_name_RnD' value={this.state.activeItem.project_name_RnD} placeholder='Project Name RnD' ></input>
<input id='submit' type='submit' name='Add'></input>
</div>
}
有了这个,它将相同的值写入输入,我现在不知道如何区分这两个输入。
解决方案
您可以为输入字段提供与您的状态属性相匹配的 ID:
<input onChange={this.handleChange} type='text' id='project_name' name='virtual_project_name' value={this.state.activeItem.project_name} placeholder='Project Name' ></input>
<input onChange={this.handleChange} type='text' id='project_name_RnD' name='virtual_project_name_RnD' value={this.state.activeItem.project_name_RnD} placeholder='Project Name RnD' ></input>
然后在changeHandler
:
let id = event.target.id;
// then using computed property name
activeItem: {
...this.state.activeItem,
[id]: event.target.value
}
});
推荐阅读
- php - 如果未设置参数,如何给出默认值
- mysql - ELK 数据摄取:elasticsearch 将文本视为布尔值,即使映射显示类型为“文本”
- ios - 快速转换日期而不会丢失
- mysql - 如何从 DO Droplet Ubuntu 18.04 连接到 DO Managed MySQL 8?
- spring-mvc - ms 图形 api。时区没有响应变化
- php - 将动态电子邮件地址添加到发布表单
- java - java.sql.SQLException:javaFX 应用程序上的 SQLite JDBC 驱动程序未实现
- r - 为什么我不能再下载 R 3.3.2 中的某些包?
- graph - 无向图中的连通分量示例
- python-3.x - opengv 安装不在 pip3 列表中