是否可以编写 es6 onChange 箭头函数？

Question

onChange es6 函数的正确语法是什么？

function myEvent(e){
console.log(e.target)
}

<select onChange=(event)=>{console.log(event.target)}>
  <option value="5"> 5</option>
  <option value="10">10</option>
  <option value="15">15</option>
</select>


<select onChange={console.log(event.target)}>
  <option value="5"> 5</option>
  <option value="10">10</option>
  <option value="15">15</option>
</select>


<select onChange="myEvent(event)">
  <option value="5"> 5</option>
  <option value="10">10</option>
  <option value="15">15</option>
</select>

<select onChange=function(){console.log("hello"))>
  <option value="5"> 5</option>
  <option value="10">10</option>
  <option value="15">15</option>
</select>

Answer 1

内联javascript你可以做的上下文 箭头函数

<select onchange="(() => console.log(event.target.value))()">

REACTJS 上下文 检查大括号和 event.target.value

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><code><select onChange={(event) => console.log(event.target.value) }>
        <option value="5"> 5</option>
        <option value="10">10</option>
        <option value="15">15</option>
</select>

<select onChange={(event) => {console.log(event.target.value)} }>
        <option value="5"> 5</option>
        <option value="10">10</option>
        <option value="15">15</option>
</select>

Answer 2

这不是真正的答案，而是证明手头的任务可以用更简单的方式完成。

document.body.onchange=e=>{
  console.log(e.target.value)
}

<select>
  <option> 5</option>
  <option> 6</option>
  <option>15</option>
</select>

<select>
  <option> 5</option>
  <option> 7</option>
  <option>15</option>
</select>

<select>
  <option> 5</option>
  <option> 8</option>
  <option>15</option>
</select>

<select>
  <option> 5</option>
  <option> 9</option>
  <option>15</option>
</select>

Answer 3

尝试将事件作为参数发送到 js 函数并在那里使用它

const onChangeHandler = (e) => {
  const selectedValue = e.target.value;
  console.log(selectedValue)
}

<select onChange="onChangeHandler(event)">
  <option value="5"> 5</option>
  <option value="10">10</option>
  <option value="15">15</option>
</select>

Answer 4

I was just wondering if it was possible to have a multi line function embedded in the html. Appears the answer is n

可以。 on* 属性的值成为函数的 主体 。因此，您可以定义一个内联函数，但您也必须调用它。

例如：

<select onChange="function foo(){
  console.log('hello')
}
foo();">
  <option value="5"> 5</option>
  <option value="10">10</option>
  <option value="15">15</option>
</select>

<!-- as IIFE -->
<select onChange="(function(){console.log('hello')}())">
  <option value="5"> 5</option>
  <option value="10">10</option>
  <option value="15">15</option>
</select>

<!-- of course that works with arrow functions too -->
<select onChange="(() => {console.log('hello')
                           console.log('goodbye')})()">
  <option value="5"> 5</option>
  <option value="10">10</option>
  <option value="15">15</option>
</select>