2

我有一个表单容器组件：

class PersonalDetailContainer extends React.Component<PropTypes> {
  onSubmit = async (fields: PersonalFields) => {
    this.props.savePersonalDetail(fields);
  };

  render(): JSX.Element {
    return (
      <div className="row">
        <div className="col-sm-12 col-md-12">
          <div>
            <PersonalDetail onSubmit={this.onSubmit} id="id" />
             <!-- onSubmit props working fine but id props not working fine
             **error: [ts] Property 'id' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<FormInstance<{}, Partial<ConfigProps<{}, {}>>>> & ...'.**
            -->
          </div>
        </div>
      </div>
    );
  }
}

const mapDispatchToProps = {
  savePersonalDetail: savePersonalDetail,
};
export default connect(null, mapDispatchToProps)(PersonalDetailContainer);

在表单组件中：

import * as React from 'react';
import { Field, InjectedFormProps, reduxForm } from 'redux-form';
import { renderInput } from '../../../utils/input-field';

export type PersonalFields = {
  name?: string;

};

interface PersonalProps extends InjectedFormProps {
  id: string;
  onSubmit({ name }: PersonalFields): void;
}

class PersonalDetail extends React.Component<PersonalProps, PersonalFields> {
  state: PersonalFields = {};

  onChangeSetToState = (stateKey: string) => (e: React.FormEvent<HTMLInputElement>) =>
    this.setState({ [stateKey]: e.currentTarget.value.trim() });

  onSubmit = () => {
    this.props.onSubmit(this.state);
  };
  render() {
    return (
      <div className="row">
        <div className="col-sm-12 col-md-12">
          <form onSubmit={this.props.handleSubmit(this.onSubmit)}>
            <Field
              name="name"
              id="name"
              component={renderInput}
              value={this.state.name}
              type="text"
              placeholder="Name"
              onChange={this.onChangeSetToState('name')}
            />
            <div className="loginBtnContainer">
              <button className="btn primaryButton" type="submit">
                Update
              </button>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

export default reduxForm({ form: 'personalForm' })(PersonalDetail);

在容器中，onSubmit正确传递给子组件但id道具没有正确传递。它抛出错误：

[ts] 类型“IntrinsicAttributes & IntrinsicClassAttributes>>> & ...”上不存在属性“id”。

如何解决这个错误？谢谢 ：）

4

1 回答 1

1

这是因为您的界面 personalprops 没有定义 id 字段。

 interface PersonalProps extends InjectedFormProps {
    onSubmit({ name }: PersonalFields): void;
    id:any; 
 }

添加这个，它将删除错误

于 2018-01-25T06:32:33.170 回答