jhipster 反应形式 onChange state 类型的参数 '{ [x: number]: any; }' 不可赋值

Question

我是 React 的新手，在用两个字段设置状态时遇到了一些 jsx 问题，该表单执行 ajax 调用以将 json 对象（响应数据）放入州 field3。我有以下内容：

export interface IMyClassState {
    field1: string;
    field2: string;

    field3: object;
}

export class MyClass extends React.Component<IMyClassProps, IMyClassState> {
    state: IMyClassState = {
        field1: '',
        field2: '',

        field3: null
    }

    ...

    onSubmit = e => {
        e.preventDefault();
        ...
    }

    onChange = e => {
        this.setState({ [e.target.name]: e.target.value });
    };

    ...

    render() {
        return(
            <form onSubmit={this.onSubmit}>
                <input type="text" id="field1" name="field1" onChange={this.onChange}/>
                <input type="text" id="field2" name="field2" onChange={this.onChange}/>
            </form>
        );
    }
};

在一个只有两个字段的示例中，我想我可以像这样有不同的 onChange：

<input type="text" id="field1" name="field1" onChange={this.onChangeField1}/>
...

但如果我有 100 个字段，那将是一个问题，这就是为什么我试图直接从我的 onChange 中的 e.target.name 获取状态字段的名称。然而，这给了我错误：

Argument of type '{ [x: number]: any; }' is not assignable to parameter of type 'IMyClassState | Pick<IMyClassState, "field1" | "field2"

如何摆脱这个错误？有没有可能像我试过的那样用一个衬里优雅地解决？

Answer 1

第一部分是固定e的类型。我们可以使用类型查询来告诉打字稿类型与 input 的 onChange 相同：onChange: JSX.IntrinsicElements['input']['onChange']

第二部分是修复推断为{ [x: string]: string; }的对象字面量。理想情况下，我们可以告诉编译器 e.target.name 是 IMyClassState

的键

onChange: JSX.IntrinsicElements['input']['onChange'] = (e) => {
    this.setState({ [e.target.name as keyof IMyClassState]: e.target.value });
};

上面的代码不起作用，因为 typescript 仍然会推断对象字面量的类型为 { [x: string]: string; }。让编译器推断出我们想要的类型的唯一方法是将 e.target.name 强制转换为 IMyClassState 的特定字段。

onChange: JSX.IntrinsicElements['input']['onChange'] = (e) => {
    this.setState({ [e.target.name as "field1"]: e.target.value }); // Ok now
};

虽然欺骗编译器并不理想，但这是最简单的选择。另一种选择是只转换对象文字。

onChange: JSX.IntrinsicElements['input']['onChange'] = (e) => {
    this.setState({ [e.target.name]: e.target.value } as any as IMyClassState);
};

jhipster 反应形式 onChange state 类型的参数 '{ [x: number]: any; }' 不可赋值

jhipster react form onChange state Argument of type '{ [x: number]: any; }' is not assignable

javascript

typescript

reactjs

jhipster

redux