我需要在redux表单中显示按钮而不是复选框。单击按钮时,我更改表单值。按钮复选框组件(reactstrap中的按钮):
export const FormCheckbox = (props: IFormCheckboxProps) => {
return (
<div>
<Button
onClick={props.toggleClick}
color={props.currentValue ? "success" : "danger"}
>
{props.currentValue ? "Yes" : "No"}
</Button>
</div>
);};
我这样使用它:
<FormCheckbox
toggleClick={setValue("isSwapTerm")}
currentValue={props.getFieldValue("isSwapTerm")}
/>
setValue函数:
const setValue = (field: string) => (event: React.ChangeEvent<{}>) => {
props.setBooleanValue(field);
};
FormContainer:
const selector = formValueSelector(ReduxFormNames.TermForm);
type DispatchProps = Pick<IMergedProps, "setBooleanValue" | "getFieldValue">;
const mapDispathToProps: MapDispatchToProps<DispatchProps, IMergedProps> =
(dispatch, props): DispatchProps => ({
setBooleanValue: (field: string) => (dispatch((innerDispatch, getState: () =>
IRootState) => {
const state = getState();
const currentValue: boolean = selector(state, field);
dispatch(change(ReduxFormNames.TermForm, field, !currentValue));
})),
getFieldValue: (field: string) => (dispatch((innerDispatch, getState: () =>
IRootState) => {
const state = getState();
return selector(state, field);
}))});
在更改表单中的某些值之前,它可以正常工作。
dispatch(change(ReduxFormNames.TermForm, field, !currentValue));
在按钮上始终单击 change 调用,但是仅当我没有更改任何形式时才调用render func。