Изменить аргумент внутри массива состояния в зависимости от индекса (React) - PullRequest
Новая
       64

Изменить аргумент внутри массива состояния в зависимости от индекса (React)

0 голосов
/ 21 июня 2020

У меня такое состояние. civilData состоит из 20 объектов 

constructor(props) {
    super(props);
    this.state = {
      ...
      data: {
        ...
        ,
        citizensData: [
          {
            id: 1,
            value1: 0,
            value2: 0,
            personalResult: 0
          },
          {
            id: 2,
            value1: 0,
            value2: 0,
            personalResult: 0
          },
          ...
        ]
      }
    }
}

Я пытался написать что-то вроде этого 

changeValueHandle = (event) => {
    this.setState({
      data:
      {
        citizensData: [
          {
            value1: event.target.id === this.state.data.citizensData.id
                        ? event.target.value1
                        : 0,
            value2:  event.target.id === this.state.data.citizensData.id
                        ? event.target.value2
                        : 0
          }
        ]
      }
    });
  }

, но это не сработало (очевидно). Этот метод вызывается внутри компонента. Это сейчас для меня основная проблема. Я застрял с проблемой изменения значений в зависимости от их индексов. Идея в том, что у меня есть 20 полей ввода, и когда я изменяю их значения, он должен переписать personalResult для точного объекта внутри массива civilData . Как лучше и правильно это сделать?

1 Ответ

0 голосов
/ 21 июня 2020

Вы можете использовать Array.prototype.map и идентификатор элемента в событии изменения, чтобы указать, какой элемент необходимо изменить: 

const Item = React.memo(function Item({ change, item }) {
  return (
    <React.Fragment>
      <input
        type="text"
        onChange={(e) =>
          change(item.id, 'value1', e.target.value)
        }
        value={item.value1}
      />
      <input
        type="text"
        onChange={(e) =>
          change(item.id, 'value2', e.target.value)
        }
        value={item.value2}
      />
    </React.Fragment>
  );
});
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        citizensData: [
          {
            id: 1,
            value1: 'val1',
            value2: 'val2',
            personalResult: 0,
          },
          {
            id: 2,
            value1: 0,
            value2: 0,
            personalResult: 0,
          },
        ],
      },
    };
  }
  changeById = (id, key, value) => {
    this.setState({
      data: {
        ...this.state.data,
        citizensData: this.state.data.citizensData.map(
          (item) =>
            item.id === id
              ? { ...item, [key]: value }
              : item
        ),
      },
    });
  };
  render() {
    return (
      <ul>
        {this.state.data.citizensData.map((item) => (
          <li key={item.id}>
            <Item item={item} change={this.changeById} />
          </li>
        ))}
      </ul>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>


<div id="root"></div>
...