Реагировать радиогруппы на ячейку таблицы - PullRequest
Новая
       8

Реагировать радиогруппы на ячейку таблицы

0 голосов
/ 17 мая 2018

У меня есть страница компонента, в которой есть много переключателей с таблицей. Как это:

enter image description here

Я сделал это с помощью пользовательского интерфейса RadioButton и его компонента Table. Сейчас он работает хорошо, но проблема в том, что он мигает. Возможно, каждый раз, когда я нажимаю кнопку, он вычисляет предыдущее и последнее состояние, и, наконец, заново отображает всю страницу.

В типичном HTML, я помню, если я установил name элемента на то же самое, мне не нужны никакие опции, но в React, особенно , этот пример использовал this.setState(...), а каждое радио было checked={this.state.selectedValue === 'value'}

Мне кажется, это очень сложно, и самое печальное, что это медленно! Как я могу избежать всей страницы рендеринга? или есть предложение новичку?

Мои фрагменты кода выглядят как показано ниже ... 

<TableBody>
    {SIM_INSTRUCTOR_ITEMS.map((el) => {
        return (
            el.list.map((item, index) => {
                itemRows++
                return (
                    <TableRow>
                        <TableCell>{item.content}</TableCell>
                        {item.possible.map(rating => {
                            let rowCount = itemRows-1;
                            return (
                                <TableCell key={uuidv1()}
                                           className={[classes.cell, classes.cell_center]}>
                                    <Radio
                                        checked={this.state.item_ratings[itemRows-1].ratingPoint == rating}
                                        onChange={ (e) => this.handleRadioChange(e, rowCount)}
                                        key={ 'radio-'+uuidv1() }
                                        value={ rating }
                                        name="radio-button"
                                        aria-label={ rating }
                                    />
                                </TableCell>
                            )
                        })}
                    </TableRow>
                )
            })
        )
    })}
</TableBody>

и я работаю с Radio Change и заявляю вот так. 

handleRadioChange = (event, itemRows) => {
    const items = this.state.item_ratings;
    items[itemRows].ratingPoint = event.target.value;
    this.setState({ items })
};

Как я могу предотвратить повторную визуализацию всей страницы при нажатии переключателя?

+) Я слышал setState сделать страницу перерисовки. Тогда как насчет использования Redux? Могу ли я предотвратить повторный рендеринг, если я использую Redux?

1 Ответ

0 голосов
/ 17 мая 2018

Я удалил uuid() для каждой строки таблицы и каждого итерированного элемента для создания уникального ключа.

и я перехожу к обновлению не всего массива, а элемента массива, используя immutable helper в реакции.

Теперь работает лучше.

...