首页 文章

如何将容器组件中的道具传递给redux表单(组件) - 使用typescript进行反应

提问于
浏览
0

我有一个Form容器组件:

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);

in Form component:

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] Property 'id' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes>>> & ...'.

如何解决这个错误?谢谢 :)

1 回答

  • 1

    因为你的界面personalprops没有定义id字段 .

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

    添加这个,它将删除rror

相关问题