onChange 多个输入答案

【问题标题】：onChage multiple inputsonChange 多个输入
【发布时间】：2020-11-09 15:32:58
【问题描述】：

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

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

【问题讨论】：

标签： javascript reactjs input onchange

【解决方案1】：

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

【讨论】：

我试过这个，但如果我尝试写入输入，它们就会保持空白。在控制台日志中，它显示它只占用了第一个字符，然后重新加载。见这里：imgur.com/pkG6c7C
您是否知道您在问题中发布的代码缺少一些括号？加上这些缺失的括号后，代码开始工作。我将从codesandbox.io 发布一张图片。
我也注意到了 - 代码有点乱。缺少括号和格式错误，但它没有解决问题，因为 handleChange 同时针对两个输入。

【解决方案2】：

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

例如：

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

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

【讨论】：

感谢您的回复。我试过这个，但现在在第一个输入中它不会取任何值，并且唯一的 char 被复制到第二个输入。
我试过这个，但如果我尝试写入输入，它们就会保持空白。在控制台日志中，它显示它只占用了第一个字符，然后重新加载。见这里：imgur.com/pkG6c7C
@pipikej 你确定你删除了你原来的setState 的其他部分吗？如果您完全按照此处的方式复制它，这应该可以工作。虽然我也建议传播其他状态（...this.state, activeItem: ...etc）否则你最终会失去其他价值。
@BrianThompson 是的，我删除了其他部分。但它不起作用。输入仍然是空的。屏幕：imgur.com/I9yMMrb
请附上一个可重现的例子。没有一个，这将很难提供帮助。

【解决方案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 })
        }

希望有效。

【讨论】：