React - как здесь установить состояние в объекте массива, текст свойства в функции onChange?

У меня такое состояние:

   state = {
        val: '',
        input: [{
            id: uuid.v4(),
            questionLabel: 'Question',
            text: '',
            typeLabel: 'Type',
            conditionLabel: 'Condition',
            types: [
                {value: '', name: ''},
                {value: 'Text', name: 'Text'},
                {value: 'Number', name: 'Number'},
                {value: 'Yes / No', name: 'Yes / No'}
            ],
            subInput: []
        }],
}

И эта функция:

textChangeHandler = event => {
    const text = this.state.input.map(currency => {
        const test = currency.text = event.target.value;
        return {...currency, text: test}
    });
    this.setState({text})
}

И я хочу изменить состояние на входе, свойство: text
Но если я ввожу вводимый текст, он не работает, я не могу вводить ввод, и состояние не меняется. Как я могу исправить эту функцию?

javascript reactjs

22.08.2018 19:30

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это потому, что вы напрямую мутируете состояние. И изменение состояния в приложении React не допускается. Вот что вы можете сделать здесь:

textChangeHandler = (event, inputIndex) => {
    const test = [...this.state.input] // first, clone the input state
    // now, you can update the text
    test[inputIndex].text = event.target.value
    this.setState({
      input: test // test is now whole updated input array
    })
}

Уведомление: вам нужно передать индекс в свой обработчик, чтобы он знал, какой из них изменить.

Если вам понравилось ниже:

textChangeHandler = event => {
        const test = [...this.state.input]
        test.forEach(t => t.text = event.target.value)
        // but wait, event.target.value? 
        // this will change all the input with the same value
        this.setState({
          input: test
        })
    }

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

Это тоже не работает, у меня такая же проблема с вашим решением, я не могу ничего писать во вводе и его расфокусировка, если я нажимаю букву на клавиатуре ... Состояние меняется, но есть только одна буква, а не полные слова или предложения. :(

— 22.08.2018 20:11

22.08.2018 19:36