javascript - 在 React.js 中处理多列列表时出错

Question

在这里，我有一个包含两个字段的列表 - 名称和类型。我正在尝试添加这两项的行并将它们保存在状态中，以便相应的名称和类型在一个对象中，在状态列中，这是一个对象数组。但是在添加选项之后，即在handleColumnChange 函数中，只有“类型”属性被保存在列数组中。我认为我使用了错误的分配运算符，但我无法弄清楚如何获取其中两个输入并同时更新状态。任何有关如何处理此问题的帮助将不胜感激。

import React, { Component } from 'react'
class App extends Component {
  constructor () {
   super()
   this.state = {
    columns: [{ name: '' ,type:''}],
   }
  }

  handleColumnChange = (idx) => (event) => {
   const newColumns = this.state.columns.map((column, sidx) => {
   if (idx !== sidx){
    return column;
   } else{
    let name,type;
    if (event.target.name === "name"){
      name=event.target.value;
    }
    if (event.target.name === "type")
      type=event.target.value;

    return { ...column, name: name, type:type };
   }
  });

  this.setState({ columns: newColumns });
 }

handleSubmit = (evt) => {
 const { columns } = this.state;
 alert(JSON.stringify(this.state));
}

handleAddColumn = () => {
 this.setState({ columns: this.state.columns.concat([{ 
   name:'',type:''}]) });
  }

 handleRemoveColumn = (idx) => () => {
   this.setState({ columns: this.state.columns.filter((s, sidx) => idx 
!== sidx) });
}

render () {
 return (
  <div className='App'>
    <p className='App-intro'>
      <form onSubmit={this.handleSubmit}>
      <h4>Columns</h4>

    {this.state.columns.map((column, id) => (
      <div className="Columns">
        <input
          type="text"
          name="name"
          placeholder={`ColumnName #${id + 1} name`}
          value={column.name}
          onChange={this.handleColumnChange(id)}
        />
        <input
          type="text"
          name="type"
          placeholder={`ColumnType #${id + 1} name`}
          value={column.type}
          onChange={this.handleColumnChange(id)}
        />
        <button type="button" onClick={this.handleRemoveColumn(id)} className="small">-</button>
      </div>
    ))}
        <button type="button" onClick={this.handleAddColumn} className="small">Add Column</button>
        <button
          onClick={() => {
            console.log("This is the state",this.state);
          }}
        >
          Submit
        </button>
      </form>
    </p>
  </div>
)
}
}
export default App

标签： javascriptreactjs