Проблема с отображением раскрывающихся меню в React - PullRequest
Новая
       42

Проблема с отображением раскрывающихся меню в React

0 голосов
/ 03 августа 2020

Я создал в CodeSandbox пример проблемы, с которой я столкнулся в своем коде с React. Вот как воспроизвести проблему:

  1. нажмите кнопку add row примерно 5 или более раз
  2. измените значение в одном из средних раскрывающихся меню на help1 или help2
  3. нажмите кнопку add row еще несколько раз

Вы можете видеть, что измененное значение остается в той же строке, даже если новый элемент был добавлен наверх массива с .unshift(). Как будто эта строка не перерисовывается. Кто-нибудь знает, как это исправить, чтобы измененное значение сдвигалось вниз всякий раз, когда вы нажимаете add row?

Мне нужно, чтобы элементы <select> находились в массиве, поскольку я использую несколько массивов для создания таблицы в конец в моем исходном коде.

Это код в песочнице: 

import React from "react";
import "./styles.css";

export class TablePanel extends React.Component {
  constructor(props) {
    super(props);
    this.row = [];
    this.state = { rows: [] };
    this.currentrow = 0;
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    let element = (
      <select onChange={val => console.log(val.target.value)}>
        <option value="help">{this.currentrow}</option>
        <option value="help1">help1</option>
        <option value="help2">help2</option>
      </select>
    );
    this.currentrow++;
    let r = (
      <tr>
        <th>{element}</th>
      </tr>
    );
    this.row.unshift(r);

    this.setState({ rows: this.row });
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.handleClick}>add row</button>
        <table>
          <tbody>{this.state.rows}</tbody>
        </table>
      </div>
    );
  }
}
...