如何修复onChangeHandler函数以一次添加多个记录?

时间:2019-03-27 18:28:54

标签: reactjs datatable eventhandler

我有一个供用户使用的表,我想通过单击“添加”按钮将多个用户添加到该表中。我无法理解onChangeHandler和onSubmit函数应该是什么样子!

就我的理解而言,只能通过将id / index传递给函数来完成。我尝试过但是我做错了什么

class Component extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      id: '',
      lastname: '',
      firstname: '',
      email: ''
    };

    this.state.displayRow = [
      {
        name: ''
      }
    ];
    this.handleChange = this.handleChange.bind(this);
    this.insertRow = this.insertRow.bind(this);
  }
  handleChange(e) {
    console.log(e.target.value);
    this.setState({ [e.target.name]: e.target.value });
  }

  insertRow(user) {
    var id = (+new Date() + Math.floor(Math.random() * 999999)).toString(36);

    this.setState({
      displayRow: [
        ...this.state.displayRow,
        {
          id: id,
          nuid: '',
          lastname: '',
          firstname: '',
          email: ''
        }
      ]
    });
  }
  render() {
    return (
      <Table responsive className="table_main">
        <thead>
          <tr className="user-table-row">
            <th>ID</th>
            <th>Last Name</th>
            <th>First Name</th>
          </tr>
        </thead>
        <tbody>
          <tr id="table">
            <td key={idx}>
              <input
                key={idx}
                type="text"
                id="id"
                name="id"
                value={item.id}
                onChange={this.handleChange(idx)}
              />
            </td>

            <td>
              <input
                key={idx}
                type="text"
                id="lastname"
                name="lastname"
                value={item.lastname}
                onChange={this.handleChange}
              />
            </td>

            <td>
              <input
                key={idx}
                type="text"
                id="firstname"
                name="firstname"
                value={item.firstname}
                onChange={this.handleChange}
              />
            </td>
          </tr>
          <td>
            <Button
              className="additional-add-btn"
              style={style}
              variant="contained"
              onClick={() => {
                this.insertRow();
              }}
            >
              + Additional User
            </Button>
          </td>
        </tbody>
      </Table>
    );
  }
}

0 个答案:

没有答案