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

Question

在我的 React + Redux + Redux-Form 应用程序中，我需要 enable/disable 一个 "Next" 按钮，具体取决于表单的有效性状态。这个按钮是由父组件控制的，所以我不能只有<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
});

如何在表单有效性发生变化时运行事件，但仍然可以访问道具？

Answer 1

一种简单的方法是读取当前有效性状态，因为 Redux-Form 使用选择器在您的 redux 状态中更新它。您甚至可以使用 redux-form 包提供的一个：isValid。由于您使用的是挂钩，因此您还可以使用 react-redux 的 useSelector 挂钩（如果您使用的是 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 挂钩。

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

Trigger event whenever validity changes in redux form

javascript

reactjs

redux

redux-form