问题描述
我有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:
Picker(selection: $sportID,label: Text("Sport")) {
ForEach(self.sportsObserved.sports) { i in
Text(i.sportName).tag(i.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
,
您可以使用[]
括号将对象键的值绑定到输入的name
。
例如:
handleChange(e) {
var name = e.target.name;
var value = e.target.value;
this.setState({
activeItem: {
...this.state.activeItem,[name]: e.target.value
},});
}
,
您当前的代码正在尝试同时更改两个输入。这就是为什么您可以看到两个输入都添加相同文本的原因,因为您的应用无法区分目标。
以下代码将允许您的应用查看目标,检查其名称,然后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更改为以下内容即可:
handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value })
}
希望有效。