Обработка нескольких форм ввода в одном методе

Question

У меня есть компонент:

import * as React from 'react';
import { ControlLabel, Form, FormControl, FormGroup } from 'react-bootstrap';

export interface IGiftState {
  person: string;
  present: string;
}

class Gift extends React.Component<{}, IGiftState> {
  public state = {
    person: '',
    present: ''
  };

  public handleChange = (event: any): void => {
    this.setState({ [event.target.name]: event.target.value });
  };

  public render() {
    return (
      <div>
        <Form>
          <FormGroup>
            <ControlLabel>Person</ControlLabel>
            <FormControl
              name="person"
              className="input-person"
              onChange={this.handleChange}
            />
          </FormGroup>
          <FormGroup>
            <ControlLabel>Present</ControlLabel>
            <FormControl
              name="present"
              className="input-present"
              onChange={this.handleChange}
            />
          </FormGroup>
        </Form>
      </div>
    );
  }
}

export default Gift;

Я использую html5-атрибут «name» для входных данных просто для повторного использования метода handleChange. Затем я хочу изменить свойство состояния с тем же именем, но Typescript выдает ошибку:

(16,19): Argument of type '{ [x: number]: any; }' is not assignable to parameter of type 'IGiftState | ((prevState: Readonly<IGiftState>, props: {}) => IGiftState | Pick<IGiftState, "pers...'.

Тип '{[x: номер]: любой; } 'нельзя назначить типу' Pick '. Свойство person отсутствует в типе {{x: number]: any; }».

Единственный способ обойти это сделать два метода (то есть handlePersonInput и handlePresentInput) и жестко изменить состояние этих свойств. Однако это не очень СУХОЙ код. Как мне это решить?

Answer 1

Проблема в том, что вы не задаете значение для FormControl.

Добавить:

value = {this.state.person}