Question

我为此一直苦苦挣扎。我们都知道箭头功能可以简化语法，如下所示：

A。箭头功能：

        onClick={() => toggleTodo(todo.id)}

B。展开箭头功能：

        onClick={() => {
           // we can see there is a return keyword here. can I just remove the return keyword ? 
           return toggleTodo(todo.id); 
           ^^^^^^
        }}

在正式的redux教程中，文件AddTodo.js：

import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'

const AddTodo = ({ dispatch }) => {
  let input

  return (
    <div>
      <form
        onSubmit={e => {                   // focus on this line
          e.preventDefault()
          dispatch(addTodo(input.value)).  // focus on this line, if i put return here, the code below won't be executed. if not, how to explain the syntax in the beginning?
          input.value = ''
        }}
      >
        <input ref={node => (input = node)} />
        <button type="submit">Add Todo</button>
      </form>
    </div>
  )
}

export default connect()(AddTodo)

问题是：在onSubmit中，为什么我们不需要在函数体内放入return？谢谢。

Answer 1

如果该返回值将在某处使用，则只需return。对于onSubmit，不需要return。提交表单时，该（箭头）功能只是在运行一些代码。

在问题中的 B 点，是的，您可以删除return ，如果返回的toggleTodo(todo.id)结果不需要执行任何操作

Answer 2

它们都是箭头功能

onClick={() => toggleTodo(todo.id)}

简短版本

 onClick={() => {
    toggleTodo(todo.id);
 }}

长版

 onClick={() => {
    toggleTodo(todo.id);
    toggleTodo2(todo.id);
    toggleTodo3(todo.id);
 }}

长版可以打多个电话，return不是必需的

Answer 3

使用同步函数并需要其结果时需要返回值。

每当您使用异步函数时，这意味着调用函数本身已经继续并且将通过回调函数进入下一阶段。

在您的情况下，window对象是onClick的调用者，因此没有理由返回值，它与它无关。

您确实想触发react的呈现机制，因此可以使用分派回调/触发器。

我可以在JavaScript的箭头功能中省略返回值吗？

3 个答案:

它们都是箭头功能