執行 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)

謝謝各位小伙伴的幫助！

Answer 1

為什么不調用一個 function，它調用接下來的兩個函數？ 像這樣的東西：

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


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

如果您需要等待第一個完成，然后再觸發第二個，您可以隨時添加async/await 。

Answer 2

你沒有打電話給你的this.props.handleSubmit

應該是this.props.handleSubmit()

當您之前調用 function 時，您正在使用：

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

實際上，您向自定義組件傳遞了對 function 的引用，單擊按鈕時將調用該引用。

然后按鈕調用 function。 您可以說 onClick function 添加了()

就像您在 arguments 中收到回調一樣：

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

但是，現在您正在做的是傳遞一個匿名 function 以在單擊按鈕時調用。 你正在通過：

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

然而在這里， this.props.handleSubmit 永遠不會被調用。

發表的評論和其他答案也是要遵循的良好做法，即：

1. 您應該遵循 react 命名約定並將您的按鈕單擊處理程序命名為onClick而不是click 。
2. 您應該創建一個名為handleClick的單獨 function 並在單擊按鈕時調用它，以使您的 return 語句盡可能精簡。