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“名称”属性用于输入，只是为了重用“ 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]：任意； }”不可分配给“选择”类型。类型'{{[x：number]]中缺少属性'person'：任意； }'。

只有这样，才能使用两种方法（即handlePersonInput和handlePresentInput）以及这些属性的硬编码更改状态。但是，这不是非常干的代码。我该如何解决？

Answer 1

问题是您没有为FormControl提供值道具。

添加：

value = {this.state.person}

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

1 个答案: