onChange 多个输入

Question

我有 Django Rest Framework 后端，我正在尝试通过 React post 那里的数据。获取数据工作正常。如果我尝试仅使用一个输入 post 数据，它也能正常工作。但是当我尝试添加更多输入时，它不起作用，我不知道如何处理多个输入..

反应代码：

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>
          }

有了这个，它将相同的值写入输入，我现在不知道如何区分这两个输入。

Answer 1

您可以使用 [] 括号将对象键的值绑定到输入的 name。

例如：

handleChange(e) {
  var name = e.target.name;
  var value = e.target.value;

  this.setState({
    activeItem: {
      ...this.state.activeItem,
      [name]: e.target.value
    },
  });
}

Answer 2

您可以为您的输入字段提供与您所在州的属性相匹配的 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
  }
});

Answer 3

您当前的代码试图同时更改两个输入。这就是为什么您可以看到两个输入添加相同文本的原因，因为您的应用无法区分目标。

以下代码将允许您的应用查看目标、检查其名称，然后 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 })
        }

希望有用。

onChange 多个输入

onChage multiple inputs

javascript

input

onchange

reactjs