Как обращаться с onChange ReactJs? Подробности внутри не могу объяснить в вопросе

Question

Привет, у меня есть проблема в реакции ввода текста пользователем. У меня есть список пунктов вместе с входным текстом. Когда я набрал текст внутри первого ввода, все поля ввода меняются. как с этим справиться.

пример кода

handleEditChange(event) {
        event.preventDefault();
        console.log(event.target.name)
        console.log(event.target.value)
        this.setState({
            [event.target.name]: event.target.value
        });
    };


{items.map(item=> (
  <input type="text" class="form-control bg-light" placeholder="Reply" name="reply" value= 
  {this.state.reply} onChange={this.handleChange} />
))}

Таким образом, поле ввода будет повторяться на основе l oop, например, это будет 3 поля ввода. образец изображения

Как я могу предотвратить это? спасибо за помощь

Answer 1

Не могли бы вы использовать <input ... name={item.name} value={this.state[item.name]}> или что-то подобное?

Answer 2

Вам необходимо иметь отдельные переменные состояния для каждого входного значения. В настоящее время вы просматриваете свои элементы и визуализируете для каждого идентичный вход с тем же значением, равным this.state.reply.

. Согласно приложенной картинке, вы можете обернуть каждый вход в компонент Discussion, который позаботится об обработке только одного ввода за раз.