Question

我的Action Creator中有一个saveMember（member：Member）方法。我应该将一个Member类型对象传递给该方法。我能够使用普通的HTML表单执行此操作。然后我尝试用redux-form库来做。

我不明白如何在同一个组件中同时使用Connect和Redux Forms。使用普通的HTML表单时，我能够在MemberForm组件本身内部定义一个onSubmit处理程序方法，并从输入中获取值并调用saveMember操作。但我现在不明白该怎么做。

参考github上的一些代码，我尝试了以下代码：

import * as React from 'react';
import { Link, RouteComponentProps } from 'react-router-dom';
import { connect } from 'react-redux';
import { ApplicationState } from '../store';
import * as MembersState from '../store/Members';
import * as ReactDOM from 'react-dom';
import { Member } from "../store/Members";
import { reduxForm, Field, FormErrors, FormProps } from 'redux-form';

interface FormData {
    name?: string;
    age?: string;
}

const validate = (values: Readonly<FormData>): FormErrors<FormData> => { 
    const errors: FormErrors<FormData> = {};

    if(values.name === undefined) {
        errors.name = 'name needed';
    }

    if(values.age === undefined) {
        errors.age = 'age needed';
    }

    return errors;
};


// At runtime, Redux will merge together...
type MemberFormProps =
    MembersState.MembersState        // ... state we've requested from the Redux store
    & typeof MembersState.actionCreators      // ... plus action creators we've requested
    & RouteComponentProps<{}>; // ... plus incoming routing parameters

class MemberForm extends React.Component<MemberFormProps, {}> {


    componentWillMount() {
        // This method runs when the component is first added to the page
        this.props.getMembers();
    }

    public render() {
        return <div>
            <h1>Members</h1>
            {this.renderForecastsTable()}
            <hr/>
            {this.renderForm()}
        </div>;
    }

    private renderForecastsTable() {
        return <table className='table'>
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
                {this.props.members.map(member =>
                    <tr key={member.id}>
                        <td>{member.id}</td>
                        <td>{member.name}</td>
                        <td>{member.age}</td>
                    </tr>
                )}
            </tbody>
        </table>;
    }

    private renderForm() {


        return <form className="htmlForm-horizontal">
                    <div className="form-group">
                        <label className="control-label col-sm-2" htmlFor="name">Name:</label>
                        <Field placeholder="First name" name="name" component="input" />
                    </div>
                    <br/><br/>
                    <div className="form-group">
                        <label className="control-label col-sm-2" htmlFor="age">Age:</label>
                        <Field placeholder="Age" name="age" component="input" />
                    </div>
                    <br/><br/>
                    <div className="form-group">        
                        <div className="col-sm-offset-2 col-sm-10">
                            <button type="submit" className="btn btn-default">Submit</button>
                        </div>
                    </div>
                </form>;
    }
}

let MemberFormConnect = connect(
    (state: ApplicationState) => state.members, // Selects which state properties are merged into the component's props
    MembersState.actionCreators                 // Selects which action creators are merged into the component's props
)
(MemberForm) as typeof MemberForm;

export default reduxForm<MemberFormProps, MemberForm>({
    form: 'SelectionWithForm',
    validate: validate,
    onSubmit: (values, dispatch, props) => {
        console.log('submit is being handled...');
        let member: Member = { name: values.name, age: parseInt(values.age) }; 
        props.saveMember(member);
    }
})(MemberFormConnect);

当我使用这段代码时，我在导出默认的reduxForm中的每一行都会出现编译错误。

ERROR in [at-loader] ./ClientApp/components/MemberForm.tsx:103:55 
    TS2345: Argument of type '{ form: string; validate: (values: Readonly<FormData>) => FormErrors<FormData, void>; onSubmit: (...' is not assignable to parameter of type 'Partial<ConfigProps<MemberFormProps, MemberForm>>'.
  Types of property 'validate' are incompatible.
    Type '(values: Readonly<FormData>) => FormErrors<FormData, void>' is not assignable to type '((values: MemberFormProps, props: MemberForm & InjectedFormProps<MemberFormProps, MemberForm>) =>...'.
      Type '(values: Readonly<FormData>) => FormErrors<FormData, void>' is not assignable to type '(values: MemberFormProps, props: MemberForm & InjectedFormProps<MemberFormProps, MemberForm>) => ...'.
        Type 'FormErrors<FormData, void>' has no properties in common with type 'FormErrors<MemberFormProps, void>'.

我没有反应和redux的经验，请帮助我。

将Redux-Forms与Connect和Typescript一起使用

0 个答案: