Блог

У меня есть таблица для пользователя, и я хочу добавить нескольких пользователей в эту таблицу, нажав на мою кнопку «Добавить». Я не могу понять, как должна выглядеть моя функция onChangeHandler и onSubmit!!

Насколько я понимаю, это будет сделано только путем передачи идентификатора / индекса функциям. Я пробовал это, но я делаю что-то не так в этом

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