Выполнить 2 функции OnClick ReactJS

Question

Надеюсь, у вас все хорошо.

У меня есть кнопка onclick, которая вызывает 2 функции, НО она не работает, и у меня нет никаких ошибок, отображаемых в консоли, поэтому я не знаю, в чем проблема.

Вот мой код

  <div className="d-grid gap-2">
            <Bouton btnCss = 'btn btn-success my-3' 
             click= { () => { this.props.handleSubmit; this.setState({begin : true})}}>
              Commencer la tâche
             </Bouton>
            </div>
        </form>
       
            </>
        )
    }
}

export default withFormik({
    mapPropsToValues : () => ({
        tache : '',
        unite : '',
        commentaire : ''

    }),
    validationSchema : Yup.object().shape({
        tache : Yup.number()
        .required('Choisissez une tâche'),
        unite : Yup.number()
        .required('Choisissez une unite'),
        commentaire : Yup.string()
        .min(5, 'Le Texte est trop court')
        .required('Veuillez entre un texte')
    }), 
    handleSubmit : (values, {props, resetForm}) => {
        resetForm();
        props.validation(values.tache, values.unite, values.commentaire);
    }
})
(taskForm)

Спасибо за помощь товарищи!

javascript reactjs

1

Mishimaster 26 Янв 2022 в 16:09

Какая-то из функций вообще работает? Также почему бы не включить вторую функцию с handleSubmit

–

Jorge Guerreiro

26 Янв 2022 в 16:12

onClick, но не click.

–

Andrew F

26 Янв 2022 в 16:13

Функции работают отлично, но я не могу сделать this.setstate в handleSubmit, у меня ошибка не могу получить к нему доступ

–

Mishimaster

26 Янв 2022 в 16:14

Класс Bouton

–

Mishimaster

26 Янв 2022 в 16:16

Answer 1

Вы не звоните своему this.props.handleSubmit

Должно быть this.props.handleSubmit()

Когда вы ранее вызывали свою функцию, вы использовали:

<Bouton click= {this.props.handleSubmit}>Commencer la tâche</Bouton>

Фактически вы передавали своему пользовательскому компоненту ссылку на функцию, которая будет вызываться при нажатии кнопки.

Затем кнопка вызывает функцию. Можно сказать, что функция onClick добавляет ()

Как если бы вы получали обратный вызов в своих аргументах:

const functionWithACallback = (callback) =>
{
   // Do stuff
   callback();
}

Однако теперь вы передаете анонимную функцию, которая будет вызываться при нажатии кнопки. Вы проходите:

() => {
    this.props.handleSubmit; 
    this.setState({begin : true})
}

Однако здесь this.props.handleSubmit никогда не вызывается.

Также сделанные комментарии и другой ответ являются хорошей практикой, которой нужно следовать, а именно:

Вы должны следовать соглашениям об именовании и называть обработчик нажатия кнопки onClick вместо click.
Вы должны создать отдельную функцию с именем handleClick и вызывать ее при нажатии кнопки, чтобы оператор return был как можно более компактным.

0

SamiElk 26 Янв 2022 в 16:41

Как ?? Да, наконец-то это сработало, но когда я вызвал только this.props.handleSubmit, он работал нормально, но не вторая функция, и теперь я добавляю this.props.handleSubmit(), и это сработало, я немного потерял

–

Mishimaster

26 Янв 2022 в 16:25

Я отредактировал свой ответ с дальнейшими пояснениями.

–

SamiElk

26 Янв 2022 в 16:38

Answer 2

Почему бы вам не вызвать одну функцию, которая вызывает следующие две функции? Что-то вроде этого:

handleClick() {
   function1();
   function2();
}


<Bouton btnCss = 'btn btn-success my-3' 
             onClick= { () => { this.handleClick() }}>
              Commencer la tâche
             </Bouton>

Вы всегда можете добавить async/await, если вам нужно дождаться завершения 1-го, прежде чем запускать 2-й. 🙂

0

tsamridh86 26 Янв 2022 в 16:16

Это не сработает, onClick будет

–

Jorge Guerreiro

26 Янв 2022 в 16:15

Отредактировал, спасибо за помощь! 😁

–

tsamridh86

26 Янв 2022 в 16:17

Нет, не будет, потому что Bouton — это настраиваемый компонент.

–

SamiElk

26 Янв 2022 в 16:19

Выполнить 2 функции OnClick ReactJS

2 ответа

Похожие вопросы

Новые вопросы

javascript