input Значения, не попадающие в таблицу

Question

Я новичок в реакции и следил за интерактивным учебником, чтобы добавлять значения в таблицы. Однако я не могу добавить все значения в таблицу. Я использую ядро ​​material-ui для этого проекта. Добавлен только один элемент, и я не уверен, почему . Пожалуйста, проверьте код и предложите изменения

Вот код:

Это Html для пользовательских значений:

<

Grid item xs={6}>
              <TextField
                label="KPI After"
                id="Kpi_After"
                variant="outlined"
                size="small"
                placeholder="Enter the KPI"
                onChange={handleChange("Kpi_After")}
                defaultValue={values.Kpi_After}
                style={{ width: "80%" }}
              />
              <label
                id="kpi_after"
                style={{ visibility: "hidden", color: "red" }}
              >
                KPI Field cannot be left blank
              </label>
            </Grid>
            <Grid item xs={6}>
              <FormControl style={{ width: "80%" }} size="small">
                <InputLabel
                  htmlFor="UOM_After"
                  style={{
                    marginLeft: 10,
                    top: "50%",
                    transform: "translate(0,-50%"
                  }}
                >
                  UOM After
                </InputLabel>
                <Select
                  name="UOM_After"
                  id="UOM_After1"
                  onChange={handleChange("UOM_After")}
                  defaultValue={values.UOM_After}
                  variant="outlined"
                  inputProps={{
                    id: "UOM_After"
                  }}
                >
                  <MenuItem value="Nos">Nos</MenuItem>
                  <MenuItem value="Percentage">Percentage</MenuItem>
                  <MenuItem value="Metric">Metric</MenuItem>
                </Select>
              </FormControl>
              <label
                id="uom_after"
                style={{ visibility: "hidden", color: "red" }}
              >
                UOM cannot be left blank
              </label>
            </Grid>
          </Grid>
          <br />
          <br />
          <br />
          <br />
          <Grid container>
            <Grid item xs={6}>
              <TextField
                label="Base Level After"
                id="Base_After"
                variant="outlined"
                size="small"
                placeholder="Enter the Base Level"
                defaultValue={values.Base_After}
                onChange={handleChange("Base_After")}

                style={{ width: "80%" }}
              />
              <label
                id="base level"
                style={{ visibility: "hidden", color: "red" }}
              >
                Base Level cannot be left blank
              </label>
            </Grid>
            <Grid item xs={6}>
              <TextField
                label="Target Level After"
                id="Target_After"
                variant="outlined"
                size="small"
                placeholder="Enter the Target Level"
                onChange={handleChange("Target_After")}
                defaultValue={values.Target_After}
                style={{ width: "80%" }}
              />
              <label
                id="target level"
                style={{ visibility: "hidden", color: "red" }}
              >
                Target Level cannot be left blank
              </label>
            </Grid>
          </Grid>
          <br />
          <br />
          <br />
          <br />
          <Grid container>
            <Grid item xs={6} direction="row" alignItems="center">
              <TextField
                id="dateTime"
                label="Target Date"
                type="date"
                variant="outlined"
                size="small"
                defaultValue={values.dateTime}
                onChange={handleChange("dateTime_After")}
                style={{ width: "67%" }}
                InputLabelProps={{
                  shrink: true
                }}
              />

              <Button
                variant="outlined"
                color="primary"
                onClick={this.handleAddRow}
                size="small"
                style={styles.button}
              >
                +
              </Button>
              <label id="date1" style={{ visibility: "hidden", color: "red" }}>
                Please choose the date
              </label>
            </Grid>

            <Grid item xs={6}>
              ...
            </Grid>
          </Grid>
          <br />
          <br />
          <Grid container>

Вот часть, где я визуализирую таблицу:

<Grid item xs={10} direction="row" alignItems="center">
              <table
                className="table table-bordered table-hover"
                id="tab_logic"
              >
                <thead>
                  {this.state.rows.length > 0 ? (
                    <tr>
                      <th className="text-center"> # </th>
                      <th className="text-center"> KPI </th>
                      <th className="text-center"> UOM </th>
                      <th className="text-center"> Base </th>
                      <th className="text-center"> Target </th>
                      <th className="text-center"> Target Date </th>
                      <th className="text-center"> Delete Row </th>
                    </tr>
                  ) : null}
                </thead>
                <tbody>
                  {this.state.rows.map((item, idx) => (
                    <tr id="addr1" key={idx}>
                      <td>{idx + 1}</td>
                      <td>
                        <input
                          type="text"
                          name="Kpi_After"
                          defaultValue={Kpi_After}
                          onChange={this.handleChangeRows(idx)}
                          className="form-control"
                          readOnly
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="UOM_After"
                          defaultValue={UOM_After}
                          onChange={this.handleChangeRows(idx)}
                          className="form-control"
                          readOnly
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="Base_After"
                          defaultValue={Base_After}
                          onChange={this.handleChangeRows(idx)}
                          className="form-control"
                          readOnly
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="Target_After"
                          defaultValue={Target_After}
                          onChange={this.handleChangeRows(idx)}
                          className="form-control"
                          readOnly
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="dateTime_After"
                          defaultValue={dateTime_After}
                          onChange={this.handleChangeRows(idx)}
                          className="form-control"
                          readOnly
                          size="38"
                        />
                      </td>

Функции для различных кнопок, таких как продолжить и добавить, следующие:

continue = e => {
e.preventDefault();
      this.props.nextStep();
    };

handleChangeRows = idx => e => {
    const { name, value } = e.target;
    const rows = [...this.state.rows];
    rows[idx] = {
      [name]: value
    };
    this.setState({
      rows
    });
  };

handleAddRow = () => {
const item = {
        Kpi_After: "",
        UOM_After: "",
        Base_After: "",
        Target_After: "",
        dateTime_After: ""
      };
      this.setState({
        rows: [...this.state.rows, item]
      });
    }
  };



handleChange = input => e => {
    this.setState({ [input]: e.target.value });
  };

Проблема в том, что в таблицу добавляется только одно входное значение