Question

在我的React + Redux + Redux-Form应用程序中，我需要根据表单的有效性状态启用/禁用“下一步”按钮。此按钮由父组件控制，所以我不能只拥有<Button disabled={!props.valid}/>。理想情况下，redux格式会给我一个像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的{{1}}钩子（如果使用的是react-redux v7.1.0或更高版本）。

结果将是：

useSelector

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

您可能还希望直接在父组件内部使用此挂钩（或其等效的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挂钩。

当有效性以Redux形式更改时触发事件

1 个答案: