Обновление материаловского TextField

@Timurs · Регистрация: 23.02.2016

Студворк — интернет-сервис помощи студентам

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import { Grid, TextField } from '@material-ui/core';
 
const initialFValues = {
    snickers: '',
    mars: '', 
    nuts: '',
    bounty: '', 
    twix: '', 
    picnic: '',
    kitkat: '', 
    milkyway: '', 
    m&m's: ''
}
 
const styles = theme => ({
    root: {
        '& .MuiFormControl-root': {
            width: '80%',
            margin: theme.spacing(1)
        }
    }
})
 
class ModeForm extends Component {
 
    state = {
        values: initialFValues
    }
 
    handleInputChange = e => {
        const { values } = this.state;
 
        const test = { [e.target.name]: e.target.value }
        console.log("test:", test);
 
        this.setState({
            ...values,
            [e.target.name]: e.target.value
        });
    }
 
 
    render() {
        const { classes } = this.props;
        const { values } = this.state;
        
        return(
            <form className={classes.root}>
                <Grid container>
                    <Grid item>
                        <TextField
                            variant='outlined'
                            label='Snickers'
                            name='snickers'
                            value={values.snickers}
                            onChange={this.handleInputChange}
                        />
                    </Grid>
                    <Grid item>
                        <TextField
                            variant='outlined'
                            label='Mars'
                            name='mars'
                            value={values.mars}
                            onChange={this.handleInputChange}
                        />
                    </Grid>
                </Grid>
            </form>
        );
    }
}
 
export default withStyles(styles)(ModeForm);

Не понимаю почему в текстфилде ничего не отображается и почему предыдущий символ заменяется на последующий, а не конкатенируется с ним.

Хотелось бы запустить именно синтаксис с квадратными скобками

JavaScript
1
2
3
4
        this.setState({
            ...values,
            [e.target.name]: e.target.value
        });

Добавлено через 1 час 5 минут
Попробовал написать так, но тоже не взлетело

JavaScript
1
2
3
4
5
6
7
8
9
10
11
    handleInputChange = (e) => {
        const { values } = this.state;
 
        const test = { [e.target.name]: e.target.value }
        console.log("test:", test);
 
        this.setState(prevState => ({
            ...values,
            [e.target.name]: e.target.value
        }));
    }

@j2FunOnly · 11.11.2021, 14:00

Не по теме:

Сообщение от Timurs

JavaScript
14
    m&m's: ''

Вы уверены, что это валидный синтаксис?

@Timurs · 11.11.2021, 15:05 **[ТС]**

j2FunOnly, я не проверял если честно, тупо поля наколотил)

Тем не менее удалось разрулить, так и думал что дело из-за вложенности, setState() просто не может изменить состояние вложенного объекта. Короче говоря логика примерно такая
setState({объект: изменённый объект})

JavaScript
1
2
3
4
5
6
7
8
9
10
11
    handleInputChange = (e) => {
        const { values } = this.state;
        const { name, value } = e.target;
 
        this.setState({
            values: {
                ...values,
                [name]: value
            }
        });
    }

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом