React. js Обработчик onChange изменяет все поля ввода при наборе текста. Как мне заставить каждое из них печатать, когда оно является целью события?

Question

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

//update.js

import React, { Component } from "react";
import axios from "../../node_modules/axios";
import Input from "./input";
import "./update.css";

class Update extends Component {
  constructor(props) {
    super(props);
    this.state = {
      _id: "",
      brand: "",
      name: "",
      price: "",
      imageLink: "",
      productLink: "",
      category: "",
      productType: "",
    };
    this.handleChange = this.handleChange.bind();
    this.onSubmit = this.onSubmit.bind();
  }
  handleChange = (evt) => {
    this.setState({ [evt.target.name]: evt.target.value });
  };

  onSubmit = (evt) => {
    evt.preventDefault();
    console.log(this.state);
    axios
      .put(
        `https://makeupinfo.herokuapp.com/product${this.state._id}`,
        this.state
      )
      .then((res) => {
        console.log(res);
      })
      .then((err) => {
        console.log(err);
      });
  };

  render() {
    const {
      _id,
      brand,
      name,
      price,
      imageLink,
      productLink,
      productCategory,
      productType,
    } = this.state;
    const info = [
      { name: "_id", placeholder: "product ID", value: _id },
      { name: "brand", placeholder: "brand", value: brand },
      { name: "name", placeholder: "product name", value: name },
      { name: "price", placeholder: "price", value: price },
      { name: "image-link", placeholder: "image link", value: imageLink },
      { name: "product-link", placeholder: "product link", value: productLink },
      {
        name: "product category",
        placeholder: "product category",
        value: productCategory,
      },
      { name: "product type", placeholder: "product type", value: productType },
    ];

    return (
      <div>
        <h2 className='links'>Search by ID and update</h2>
        <div className='form-container'>
          <Input props={info}></Input>
        </div>
      </div>
    );
  }
}
export default Update;

и дочерний компонент:

import React from "react";

class Input extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange = (e) => {
    e.preventDefault();
    this.setState({ value: e.target.value });
    console.log(this.state.value);
  };
  render() {
    const data = this.props.props;
    const dataArray = data.map((item) => (
      <input
        className='form-control form-control-sm'
        name={item.name}
        type='text'
        placeholder={item.placeholder}
        value={this.state.value}
        onChange={this.handleChange}
        key={item.name}
      />
    ));
    return <div>{dataArray}</div>;
  }
}

export default Input;

Answer 1

Все ваши входные данные имеют одинаковое значение state.value из компонента Input. Поэтому, когда вы редактируете один, вы редактируете все из них. Ваш компонент Input должен отображать только один вход, и вы должны переместить info.map в компонент Update.

Прямо сейчас вы вызываете map внутри Input, который генерирует все входы с одним общим значением. Если вы создадите карту в компоненте «Обновление», вы будете отображать один вход для каждого входа, и все они будут иметь свое собственное значение, так что больше никаких побочных эффектов.