Инициирующее событие всякий раз, когда действительность изменяется в форме избыточности - PullRequest
Новая
       9

Инициирующее событие всякий раз, когда действительность изменяется в форме избыточности

0 голосов
/ 23 июня 2019

В моем приложении React + Redux + Redux-Form мне нужно включить / отключить кнопку «Далее» в зависимости от состояния действительности формы. Эта кнопка управляется родительским компонентом, поэтому я не могу просто иметь <Button disabled={!props.valid}/>. В идеале приставка-форма выдала бы мне событие типа 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
});

Как я могу запустить событие всякий раз, когда валидность формы изменяется, но все еще иметь доступ к реквизиту?

1 Ответ

1 голос
/ 23 июня 2019

Один простой способ сделать это - прочитать текущее состояние достоверности, когда Redux-Form обновляет его в вашем состоянии избыточности, используя селектор. Вы даже можете использовать один из пакетов redux-form: isValid. Поскольку вы используете хуки, вы также можете использовать хук react-redux useSelector (если вы используете response-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.

...