使用 TypeScript 2.0 在 React 中处理多个输入 -> TS2345:类型为"{ [x: string]: string | boolean; }"的参数



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

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

代码有效,但问题始于打字稿。我收到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)} />

尝试以下:

const name = target.name as "password" | "email";
const newState: Partial<IState> = {};
newState[name] = value;
this.setState(newState);

决定暂时这样解决它:

const name = target.name as any;

相关内容