尝试传递参数时未定义未捕获引用错误xyz

Question

我目前正试图通过参数来设置当前大小的状态，这取决于用户当前使用的选项，所以我设置了一个函数和一个参数，无论何时触发onSelect，它都会传递大小的变量，但由于某种原因，我发现我的函数没有定义，我猜测它的语法，但我似乎无法理解，这是我当前的代码：

const updateSize = userSize = () => {
setSize(userSize);
console.log(userSize);
}

<select className="buttons form-control  mb-2">
<option onSelect={updateSize("Small")}>Small</option>
<option onSelect={updateSize("Medium")}>Medium</option>
<option onSelect={updateSize("Large")}>Large</option>
</select>

Answer 1

将const updateSize = userSize = () => {改为const updateSize = (userSize) => {

Answer 2

与其在单个选项上设置事件侦听器，不如在<select>标记本身上设置它。然后获取所选选项的文本，并在旅游代码中使用它。

HTML

<select onchange="updateSize()" className="buttons form-control  mb-2" id="select">
<option>Small</option>
<option>Medium</option>
<option>Large</option>
</select>

JS-

<script>
function updateSize() {
let select = document.getElementById('select');
let text = select.options[select.selectedIndex].text;
console.log(text)
}
</script>

文本值可以是"小"、"中"或"大"，具体取决于选择的选项。

Answer 3

问题是因为我的函数在另一个函数中，而我没有注意到，因此超出了范围。

Answer 4

如果要为常量函数指定参数，请使用以下方法。

<select className="buttons form-control  mb-2">
<option onSelect={()=>updateSize("Small")}>Small</option>
<option onSelect={()=>updateSize("Medium")}>Medium</option>
<option onSelect={()=>updateSize("Large")}>Large</option>
</select>

也用于updateSize函数。将参数保留在((中。

const updateSize = (userSize) => {
setSize(userSize);
console.log(userSize);
}