Блог

Я хотел бы получить значения некоторых входных данных при изменении, когда они находятся внутри функции цикла карты. Это мой компонент:

 import React, { Component } from "react";

class ArrayComponent extends Component {
 constructor(props) {
 super(props);
 this.state = { objects: [] };
 }

  handleChange(index, id, e) {

  // what to put here ?
  // want to have a state like :
  // [{index: e.target.value, key: id}, {index: e.target.value, key: id}, ...]

   }
 render() {
  return (
     <Form onSubmit={this.onSubmit}>
      {items.map((item, index) => (
        <div>
          {item.name}
          <input
            key={index}
            value={this.state.objects[index]}
            onChange={this.handleChange.bind(this, index, item.id)}
          />
      </div>
    ))}
       <Button>
         Update 
       </Button>
     </Form>
    );
  }
  }

  export default ArrayComponent;
 

Я хочу, чтобы у меня было такое состояние, как :
[{index: e.target.value, id: id}, {index: e.target.value, id: id}, ...] Это означает, что если это четыре входа, я хочу иметь состояние, подобное приведенному выше, для четырех входов.

Вы ищете что-то подобное:

 constructor(props) {
 super(props);
 this.state = { objects: {} };
}

handleChange(event, index, id) {
   this.setState((state) => {
    const newObject = {...state.objects};
    newObject[`${index}`] = {value: event.target.value, key: id}
    return {objects: newObject }
   });
}

render() {
  return (
     <Form onSubmit={this.onSubmit}>
      {items.map((item, index) => (
        <div>
          {item.name}
          <input
            key={item.id}
            value={this.state.objects[`${index}`]?.value || ''}
            onChange={(event) => this.handleChange(event, index, item.id)}
          />
      </div>
    ))}
       <Button>
         Update 
       </Button>
     </Form>
    );
  }
}
 

Вам следует избегать установки index значений карты в качестве ключей компонентов. Поэтому я удалил индекс и просто использовал идентификатор элемента в качестве ключевой опоры.

Изменить — Удаленный индекс

Вы можете удалить индекс все вместе:

 handleChange(event, id) {
   this.setState((state) => {
    const newObject = {...state.objects};
    newObject[`${id}`] = {value: event.target.value, key: id}
    return {objects: newObject }
   });
}

//........

value={this.state.objects[`${item.id}`]?.value || ''}
onChange={(event) => this.handleChange(event, item.id)}