时间戳

首页 > 解决方案 > 每当 redux 形式的有效性发生变化时触发事件

javascript - 每当 redux 形式的有效性发生变化时触发事件

问题描述

在我的 React + Redux + Redux-Form 应用程序中，我需要根据表单的有效性状态启用/禁用“下一步”按钮。这个按钮是由父组件控制的，所以我不能只拥有<Button disabled={!props.valid}/>. 理想情况下，redux-form 会给我一个onValidityChanged我可以监听的事件，并setCompleted()在发生这种情况时调用父组件传递的函数。然而这样的事件似乎并不存在。我也不能使用onChange钩子，因为此时它无法访问父级传递的道具。

例如

function Parent(props){
    const [completed, setCompleted] = React.useState(false);

    return (
        <div>
            <Child setCompleted=setCompleted/>
            <button disabled={!completed}>Next</button>
        </div>
    );
}

const Child = reduxForm({form: 'form'})(props => {
    const {setCompleted} = props;

    // Call setCompleted once this form becomes valid
});

每当表单的有效性发生变化时，我如何运行一个事件，但仍然可以访问道具？

标签： javascriptreactjsreduxredux-form

解决方案

一种简单的方法是读取当前的有效性状态，因为 Redux-Form 在你的 redux 状态下更新它，使用选择器。您甚至可以使用redux-form软件包提供的一个：isValid. 由于您使用的是钩子，因此您也可以使用react-redux'suseSelector钩子（如果您使用的是 react-redux v7.1.0 或更高版本）。

结果将是：

import { useSelector } from 'react-redux`;
import { reduxForm, isValid } from 'redux-form`;

const Child = reduxForm({form: 'form'})(props => {
    const { setCompleted } = props;
    const isFormValid = useSelector(state => isValid('form')(state));

    // Call setCompleted once this form becomes valid
    if (isFormValid) {
      setCompleted(true);
    }
});

当然，您可能希望在另一个文件中提取此选择器并记忆它。

您可能还想mapStateToProps直接在父组件内使用这个钩子（或其等效项），以避免useState首先使用钩子。

推荐阅读