使用 TypeScript 2.0 在 React 中处理多个输入 -> TS2345：类型为 '{ [x: string]: string | 的参数布尔值； }'

Question

我一直在阅读有关在 React 中处理多个输入的指南。

https://facebook.github.io/react/docs/forms.html#handling-multiple-inputs

代码有效，但问题始于 TypeScript。我收到 this.setState({ [name]: value}); 的以下错误：

error TS2345: Argument of type '{ [x: string]: string | boolean; }' is not assignable to parameter of type 'Pick<IState, "password" | "email">'. Property 'password' is missing in type '{ [x: string]: string | boolean; }

我该如何解决这个问题？我知道 [name] 与状态属性不匹配，但我想要一个好的解决方案而不是黑客解决方案。

代码：

interface IState {
    email: string,
    password: string
}

...

handleChange(event: React.ChangeEvent<HTMLInputElement>) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
        [name]: value
    });
}

...

<input
name="email"
type="email"
value={this.state.email}
onChange={(event) => this.handleChange(event)} />

Answer 1

试试这个：

const name = target.name as "password" | "email";
const newState: Partial<IState> = {};

newState[name] = value;

this.setState(newState);

Answer 2

决定暂时这样解决：

const name = target.name as any;

使用 TypeScript 2.0 在 React 中处理多个输入 -> TS2345：类型为 '{ [x: string]: string | 的参数布尔值； }'

Handing multiple inputs in React with TypeScript 2.0 -> TS2345: Argument of type '{ [x: string]: string | boolean; }'

javascript

typescript

reactjs

typescript2.0