英文:
Grab the selected value of a select
问题
I have a select that works fine but I need to capture the value that I am selecting, but it is generating an error Cannot read properties of undefined (reading 'value'), i have not been able to solve it.
我有一个正常工作的选择器，但我需要捕获我所选择的值，但它生成了一个错误无法读取未定义的属性（读取'value'），我一直没有解决它。
import React, { useState, useEffect } from "react";
import WindowedSelect from "react-windowed-select";
function App() {
const [t4t, setUniversidad] = useState([]);
const [e2, setE2] = useState(null);
console.log(e2 + " 已选择");
useEffect(() => {
(async () => {
const req = await fetch(
`https://witalenco.com.co/apiWittytalent/dyc/titulos/carreras.php`
);
const getres2 = await req.json();
console.log({ getres2 });
setUniversidad(await getres2);
})();
}, []);
// 这里是转换部分
const options = t4t.map((item) => ({
label: item.carrera,
value: item.id_titulos
}));
const handlecountrye2 = (event) => {
setE2(event.target.value);
};
return (
<div>
<div class="col-12">
<br />
<WindowedSelect
options={options}
onChange={handlecountrye2}
value={e2}
name="e2"
/>
</div>
</div>
);
}
export default App;
You can find the code here.
英文:
I have a select that works fine but I need to capture the value that I am selecting, but it is generating an error Cannot read properties of undefined (reading 'value'), i have not been able to solve it.
import React, { useState, useEffect } from "react";
import WindowedSelect from "react-windowed-select";
function App() {
const [t4t, setUniversidad] = useState([]);
const [e2, setE2] = useState(null);
console.log(e2 + " Seleccionado");
useEffect(() => {
(async () => {
const req = await fetch(
`https://witalenco.com.co/apiWittytalent/dyc/titulos/carreras.php`
);
const getres2 = await req.json();
console.log({ getres2 });
setUniversidad(await getres2);
})();
}, []);
// Here is the transformation
const options = t4t.map((item) => ({
label: item.carrera,
value: item.id_titulos
}));
const handlecountrye2 = (event) => {
setE2(event.target.value);
};
return (
<div>
<div class="col-12">
<br />
<WindowedSelect
options={options}
onChange={handlecountrye2}
value={e2}
name="e2"
/>
</div>
</div>
);
}
export default App;
https://codesandbox.io/s/dreamy-darkness-9z9cck?file=/src/App.js:0-992
答案1
得分: 0
请注意，这并不是严格地“选择”，而是特定的react-windowed-select。所以如果你在跟随用于类似<select>的示例，那么你可能提供了不正确的信息。
如果event.target是undefined，那么event是什么？将其记录到控制台会显示以下结构：
{label: "ABOGADO (A)", value: "3"}
（这也表明它被赋予了一个误导性的名称。它不是真正的“事件”，更像是一个选择的选项。我建议将该函数中的变量重命名为反映这一点的名称。）
正如你所看到的，确实没有target属性。那么你想要使用哪个属性呢？看起来你想要使用整个对象：
setE2(event);
我已经分叉了你的沙箱演示以进行演示：https://codesandbox.io/s/wizardly-estrela-vkf3g2?file=/src/App.js
（另外，我修改了顶层的console.log语句，将对象和字符串文字作为单独的参数发送到控制台，因为尝试将它们连接起来会产生不正确的输出。）
（此外，还有另一个错误在你的浏览器控制台中，这个错误很容易纠正，请参考此链接。）
英文:
Note that this isn't strictly "a select", this is specifically react-windowed-select. So if you're following examples used for something like a <select> then you may be providing yourself with incorrect information.
If event.target is undefined then what is event? Logging it to the console reveals the following structure:
{label: "ABOGADO (A)", value: "3"}
(Which also suggests that it's been given a misleading name. It's not really an "event", more of a selected option. I would recommend renaming the variable in that function to something which reflects this.)
As you can see, there is indeed no target property there. So what property do you want to use? It looks like you want to use the whole object:
setE2(event);
I've forked your sandbox demo to demonstrate: https://codesandbox.io/s/wizardly-estrela-vkf3g2?file=/src/App.js
(Additionally I modified the top-level console.log statement to send the object and string literal to the console as separate arguments, since trying to concatenate them produces incorrect output.)
(As an aside, there's also another error in your browser's console that's easily corrected.)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论