Как хранить состояние для переиспользуемых компонентов?

Question

[Артур Кудашев]

Здравствуйте, у меня появилась проблема с хранение состояния компонента Input. Текущее состояние выглядит примерно так:

inputs: [
    { id: 0, name: 'name', value: '', valid: true, placeholder: 'Прозведение, автор, название, ISBN', size: '_lg', btn-text: 'Найти'},
    { id: 1, name: 'publication-year', value: '', valid: true, placeholder: 'Год издания' },
    { id: 2, name: 'publisher', value: '', valid: true, placeholder: 'Издательство' },
    { id: 3, name: 'category', value: '', valid: true, placeholder: 'Категория' },
    { id: 4, name: 'language', value: '', valid: true, placeholder: 'Язык' }  
]

В моем случае поля value, items и valid будут меняться по со временем. Я думаю, что хранить в состоянии статические поля не совсем правильно, т.к в состоянии надо хранить данные которые будут изменяться. Я не знаю как лучше связать компонент с его состоянием. Например:

<InputContainer size  = 'lg'>
    <Input placeholder = 'Название' name = 'name' />
    <Button>Найти</Button>
</InputContainer>

Я вынес все статические поля из состояние в сам компонент, но изменяемые поля все еще остались в состоянии. Мне придется каждому Input вручную прописывать id и искать его в состоянии или можно сделать это лучше? В этом плане у меня мало опыта, поэтому я не знаю как правильно сделать это.

Answer 1

[Антон Спирин]

state = {
  name: '',
  publicationYear: '',
  publisher: '',
  category: '',
  language: '',
  errors: {},
};

Ошибки валидации складывать по ключу в errors.

Comments

[Артур Кудашев]

Антон Спирин, а где это все хранить? Как я понял мне придется для каждого Input хранить отдельное состояние?

[Антон Спирин]

Артур Кудашев, нет. Это надо хранить в компоненте вашей формы.

[Артур Кудашев]

Антон Спирин, то есть я должен хранить так:

state = {
    name: { value: '', valid: true, items: [] },
    // Так же с остальными полями
}

[Антон Спирин]

Артур Кудашев, нет, как в ответе.

[Артур Кудашев]

Антон Спирин, а как мне хранить несколько полей? Можете показать ? Я не совсем понимаю.

[Антон Спирин]

Артур Кудашев,

class Form extends React.Component {
  state = {
    name: '',
    lastName: '',
    errors: {},
  };
  
  handleChange = e => { /* ... */ };  
  handleSubmit = e => { /* ... */ };  

  render() {
    const { name, lastName } = this.state;

    return (
      <div>
        <div>
          <input name="name" value={name} onChange={this.handleChange} />
          {errors.name && <div>{errors.name}</div>}
        </div>
        <div>
          <input name="lastName" value={lastName} onChange={this.handleChange} />
          {errors.lastName && <div>{errors.lastName}</div>}
        </div>
        <button onClick={this.handleSubmit}>Submit</button>
      <div/>
    );
  };
}

[Артур Кудашев]

Антон Спирин, Я понял вас. Например, чтобы добавить поле selectItems, я просто добавляю в state поле selectItems и обращаюсь в нем по именам как в поле errors?

[Антон Спирин]

Артур Кудашев, да. Обратите внимание на реализацию обработчика onChange

[Артур Кудашев]

Антон Спирин, понял. Спасибо)