以一种方法处理多个表单输入答案

【问题标题】：Handling multiple form inputs in one method以一种方法处理多个表单输入
【发布时间】：2018-06-26 15:21:39
【问题描述】：

我有一个组件：

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 的“名称”属性输入只是为了重用“handleChange”方法。然后我想更改同名的state属性但是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: number]: any; }' 不可分配给类型 'Pick'。 '{ [x: number]: any; 类型中缺少属性 'person' }'。

解决这个问题的唯一方法是创建两个方法（即handlePersonInput 和handlePresentInput）并硬编码更改这些属性的状态。但是，这不是很干燥的代码。我该如何解决？

【问题讨论】：

this.setState({ [event.target.name as any]: event.target.value }); 适合您吗？ this.setState({ [event.target.name as keyof IGiftState]: event.target.value }); 也可能有效。
不幸的是，没有。我都试过了，错误仍然存在

标签： javascript reactjs typescript frontend

【解决方案1】：

问题在于您没有为 FormControl 提供 value 属性。

添加：

value = {this.state.person}

【讨论】：