Javascript onChage多输入
我有Django Rest框架后端,我正试图通过React将数据发布到那里。提取数据工作正常。如果我尝试只使用一个输入来发布数据,它也可以正常工作。但是当我尝试添加更多输入时,它不起作用,我不知道如何处理多个输入 反应代码:Javascript onChage多输入,javascript,reactjs,input,onchange,Javascript,Reactjs,Input,Onchange,我有Django Rest框架后端,我正试图通过React将数据发布到那里。提取数据工作正常。如果我尝试只使用一个输入来发布数据,它也可以正常工作。但是当我尝试添加更多输入时,它不起作用,我不知道如何处理多个输入 反应代码: class Activity2project extends React.Component { constructor(props) { super(props); this.state = { virtualP
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>
}
class Activity2project扩展了React.Component{
建造师(道具){
超级(道具);
此.state={
虚拟项目列表:[],
活动项目:{
id:null,
项目名称:“”,
项目名称:“”,
},
this.handleSubmit=this.handleSubmit.bind(this)
this.handleChange=this.handleChange.bind(this)
this.fetchVirtualProjects=this.fetchVirtualProjects.bind(this)
}
手变(e){
var name=e.target.name
var值=e.target.value
这是我的国家({
活动项目:{
…this.state.activeItem,
项目名称:e.target.value,
项目名称:e.target.value,
}
})
}
render(){
}
这样,它将相同的值写入输入,现在我不知道如何区分这两个输入。您可以使用
[]
括号将对象键的值绑定到输入的名称
例如:
handleChange(e) {
var name = e.target.name;
var value = e.target.value;
this.setState({
activeItem: {
...this.state.activeItem,
[name]: e.target.value
},
});
}
您可以为输入字段提供与状态属性匹配的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>
您当前的代码试图同时更改两个输入。这就是为什么您可以看到两个输入都添加了相同的文本,因为您的应用程序无法区分目标
下面的代码将允许您的应用程序查看目标,检查其名称,然后handleChange将设置状态,假设名称与可用选项之一匹配
因此,输入的名称应反映州名称,如下所示:
<input onChange={this.handleChange} type='text' id='virtual_project' name='project_name' value={this.state.activeItem.project_name} placeholder='Project Name' ></input>
<input onChange={this.handleChange} type='text' id='virtual_project_RnD' name='project_name_RnD' value={this.state.activeItem.project_name_RnD} placeholder='Project Name RnD' ></input>
希望能起作用。谢谢您的回复。我尝试过这个,但现在在第一次输入中它不会接受任何值,并且唯一的字符被复制到第二次输入。我尝试过这个,但如果我尝试写入输入,它们将保持为空。在控制台日志中,它显示它只使用了第一个字符,然后重新加载。请参见:imgur.com/pkG6c7C@pipikej你确定您删除了原始的设置状态的其他部分
?如果您完全按照此处的方式复制它,则应该可以使用。不过我也建议将状态的其余部分也分散开来(…This.state,activeItem:…etc
)否则,您将丢失其他值。@Brianthonpson是的,我删除了其他部分。但它不起作用。输入仍然是空的。屏幕:请包含一个可复制的示例。如果没有示例,这将很难帮助您。我尝试了这个方法,但如果我尝试写入输入,它们将保持为空。在控制台日志中,它显示只需第一次检查Racker,然后它重新加载。请参见此处:您是否意识到您在问题中发布的代码缺少一些括号?在放入这些缺少的括号后,代码开始工作。我将从codesandbox.io发布一个图像。我注意到了同样的情况-代码有点凌乱。缺少括号和格式错误,但是由于handleChange同时以两个输入为目标,因此未修复该问题。
<input onChange={this.handleChange} type='text' id='virtual_project' name='project_name' value={this.state.activeItem.project_name} placeholder='Project Name' ></input>
<input onChange={this.handleChange} type='text' id='virtual_project_RnD' name='project_name_RnD' value={this.state.activeItem.project_name_RnD} placeholder='Project Name RnD' ></input>
handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value })
}