Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.07.2021, 00:30
Интересующийся
Отправить личное сообщение для alacka Посмотреть профиль Найти все сообщения от alacka
 
Регистрация: 17.04.2014
Сообщений: 11

React подскажите новичку
export default class AppHeader extends Component {

    constructor() {
        super();

    }

    state = {
        data : [
            {label: 1},
            {label: 23},
            {label: 45}
        ]
    }

    plusOne = () => {

    }



    render() {

        const elem = this.state.data.map((item) => {
            return(
                <div key={item.label}>
                    <div>{item.label}</div>
                    <div>++</div>
                </div>
            )
        });;
        
        return (
            
            <div>{elem}</div>
        )

    }


}


Выводится все норм, но как сделать onClick на ++ чтобы срабатывало plusOne и в нужный label плюсовалось плюс 1

что то застопорился на этом

подскажите пожалуйста
Ответить с цитированием
  #2 (permalink)  
Старый 15.07.2021, 08:34
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Сообщение от alacka
что то застопорился на этом
По примеру видно что ты мало чего читал про Реакт...
Вот как нужно оформлять и работать со стейтом
https://learn-reactjs.ru/tutorial#ma...tive-component
Ответить с цитированием
  #3 (permalink)  
Старый 15.07.2021, 08:38
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

alacka, тут вообще есть куча вариаций на тему "счетчика"...
https://askdev.ru/q/uvelichenie-znac...-react-482725/
Ответить с цитированием
  #4 (permalink)  
Старый 15.07.2021, 10:48
Интересующийся
Отправить личное сообщение для alacka Посмотреть профиль Найти все сообщения от alacka
 
Регистрация: 17.04.2014
Сообщений: 11

Спасибо, да я только начинаю
немного продвинулся дальше, но почему то записать не получается

const index = data.findIndex(elem => elem.label == label);
            data[index].label = 7;


index - показывает нужный елемммент, но перезаписать выдает ошибку

export default class AppHeader extends Component {


    state = {
        king : 2,
        data: [
            {label: 2},
            {label: 44},
            {label: 65}
        ]
    }

    plusOne = (label) => {
        this.setState(({data}) => {
            const index = data.findIndex(elem => elem.label == label);
            data[index].label = 7;
        })
        
    }



    render() {


        const allpost = this.state.data.map(item => {
            return (
                <div key={item.label}>
                    <div>{item.label}</div>
                    <div onClick={() => this.plusOne(item.label)}>++</div>
                </div>
            )
        })
        
        return (
            <>
                {allpost}
            </>
        )

    }


}
Ответить с цитированием
  #5 (permalink)  
Старый 15.07.2021, 11:15
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Сообщение от alacka
но перезаписать выдает ошибку
Есть несколько подходов для правильного изменения состояния...
Один из таких подходов показан в примере (ссылку я давал выше)

handleClick(i) {
   const squares = this.state.squares.slice();
   squares[i] = 'X';
   this.setState({squares: squares});
}

Т.е. делается "копия" всего массива и в копии меняется нужный элемент.
После этого "оригинальный" массив заменяется "новым".

Так же хочу заменить (раз ты используешь уже массив объектов) имеет смысл установить элементам ИД. Так Реакт сможет более "продуктивно" выполнять рендеринг твоих компонентов.
Ответить с цитированием
  #6 (permalink)  
Старый 15.07.2021, 11:24
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

alacka, вот тебе еще статейка про использование setState()...
https://dev-gang.ru/article/react-se...ut-9rojos2c9r/

дело в том что ты не правильно используешь функцию, которую ты передаешь в setState().
Суть той функции довольно проста:
- принять "старое" состояние
- вернуть обновленное.
Вот собственно "возврата" у тебя и нет.

Общий тебе совет - начни читать книги по Реакту. В противном случае ты так и будешь "тыкаться как мокрый телок" в разные ситуации, которые сам же будешь создавать по незнанию.
Ответить с цитированием
  #7 (permalink)  
Старый 15.07.2021, 11:26
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Сообщение от ksa
начни читать книги по Реакту
Начни хоть с этой...
https://ru.pdfdrive.com/reactjs-дл...188733903.html
Ответить с цитированием
  #8 (permalink)  
Старый 15.07.2021, 11:31
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Но лучше вот эту.
https://ru.pdfdrive.com/react-в-д...190138292.html
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подскажите новичку по типам TolkoVot Node.JS 1 26.12.2019 10:44
Подскажите новичку useruser Элементы интерфейса 6 21.01.2013 17:51
Подскажите новичку! Установка css только для 1 элемента Илья! (X)HTML/CSS 1 26.06.2012 01:42
Подскажите по новичку с проверкой if/else в jQyuery shmep jQuery 2 14.12.2010 13:14
подскажите новичку пожалуйста с вставкой в форму marlic Элементы интерфейса 4 02.11.2009 13:48