如何使箭头功能起作用？

Question

了解ES6并想知道如何创建一个可以调试的箭头函数：

 <button onClick={() => this.setState({open: !open})}>Toggle</button>

如何在此处放置console.log以查看是否已触发此操作？

Answer 1

使用大括号{}作为箭头函数，该函数将包含一段代码。

<button onClick={() => {console.log('hello');this.setState({open: !open})}}>Toggle</button>

格式化

 <button onClick={() => {
       console.log('hello');
       this.setState({open: !open})
    }}>
      Toggle
    </button>

希望这有帮助！

Answer 2

你可以让它调用一个单独的函数，console.logs并设置状态：

<button onClick={this.potato}>Toggle</button>

function potato() {
    console.log('bombs away');
    this.setState({open: !open})
}

或者您可以在render函数中放置一个print语句，因为无论何时更新状态，它都会触发重新渲染

Answer 3

您的代码无效HTML。 onClick属性的值必须是字符串，因此它应该是

<button onClick="() => this.setState({open: !open})">Toggle</button>

但是，这也不会做任何事情，因为仅执行函数声明不会做任何事情。你可能只想要

<button onClick="this.setState({open: !open})">Toggle</button>

现在很容易坚持console.log：

<button onClick="console.log("here!"); this.setState({open: !open})">Toggle</button>

当然，建议你不要这样做。您应该使用addEventListener来设置事件处理程序。所以它可能是

const handler = () => this.setState({open: !open});
button.addEventListener('click', handler);

如果你想将console.log添加到handler，如另一个答案所述，你可以放弃简洁的体形（没有花括号）：

const handler = () => { console.log("here"); this.setState({open: !open}); };

或者，尽管通常不建议，但您可以使用逗号运算符：

const handler = () => (console.log("here"), this.setState({open: !open}));

以下习语也很有用：

const handler = () => console.log("here") || this.setState({open: !open});

因为console.log返回undefined而有效。这样，您只需删除字符console.log("here") ||即可删除日志，而无需担心修复大括号和粗体。