javascript - 如何获取按钮列表中我按下的按钮的值
问题描述
这段代码在一个功能组件内:选择(onclick 函数)一直打印未定义,我使用了 const [chosen, setchosen] = useState([]) 这是完整代码 一切都正确导入 想法是我想要拥有该职位能够选择适用于该职位的候选人...................................... ..................................................... ..................................................... ..................................................... ..................................................... ..................................................... ..
const Details = () => {
const { key } = useParams();
console.log(key)
const [loading, setLoading] = useState(true);
const [details, setDetails] = useState({});
const [userid, setuserid] = useState([]);
const [sameuser, setSameuser] = useState(false)
const [pressed, setpressed] = useState(false)
const [pressed2, setpressed2] = useState(false)
const [chosen, setchosen] = useState([])
useEffect(() => {
var docRef = db.collection("Quests").doc(key);
docRef.get().then(function (doc) {
if (doc.exists) {
console.log("Document data:", doc.data());
setDetails(doc.data());
setLoading(false)
} else {
// doc.data() will be undefined in this case
console.log("No such document!");
}
}).catch(function (error) {
console.log("Error getting document:", error);
});
}, []);
if (loading) {
return <div className="Quests">Still loading...</div>;
}
auth.onAuthStateChanged((user) => {
if (user) {
setuserid(user.uid)
}
userid == details.ownerId ? (
setSameuser(true)) : (
console.log("not same user")
)
});
let button;
const AddCandidate = e => {
var docRef = db.collection("Quests").doc(key)
let currCandidates = details.candidates;
currCandidates.push(userid)
docRef.set({
candidates: currCandidates
}, { merge: true });
setpressed(true)
}
let candidatelist
const Pickuser = () => {
console.log("hi", details.candidates)
setpressed2(true)
}
const choose = (value) => {
// console.log("hi")
// // // candidatelist = <ol>{details.candidates.map(details => <li>{details}</li>)}</ol>
// // setpressed2(true)
console.log(chosenvalue)
setchosen(chosenvalue)
console.log(chosen)
}
if (sameuser) {
if (pressed2) {
var chosenvalue
button = <Button onClick={Pickuser}>Pick user</Button>
candidatelist = <ol>{details.candidates.map(details => <Button value={chosenvalue} onClick={choose} >{details}</Button>)}</ol>
}
else {
button = <Button onClick={Pickuser}>Pick user</Button>
candidatelist = <h1></h1>
}
} else {
if (pressed) {
button = <h1>Thanks for applying</h1>
console.log("pressed")
candidatelist = <h1></h1>
}
else {
button = <Button onClick={AddCandidate}>Apply</Button>
candidatelist = <h1></h1>
}
}
return (
<div>
<h1>{details.title}</h1>
<h2>{details.detailspara}</h2>
<h3> {details.Category}</h3>
<h3>{details.picofquest}</h3>
<img
src={details.url}
alt="Uploaded Images"
height="300"
width="400"
/>
<h3>${details.price}</h3>
<h3>{details.time}</h3>
<h3>{details.ownerId}</h3>
<h3>{userid}</h3>
{button}
{candidatelist}
</div>
)
}
export default Details;
解决方案
如果将函数传递给事件处理程序,则将事件对象传递给函数。单击按钮时获取价值的最简单方法就像下面的代码
<Button
onClick={() => someFunction(value)}
>
Button Text
</Button>
https://reactjs.org/docs/events.html#overview
https://reactjs.org/docs/handling-events.html
const choose = (value) => {
// console.log("hi")
// // // candidatelist = <ol>{details.candidates.map(details => <li>{details}</li>)}</ol>
// // setpressed2(true)
console.log(chosenvalue)
setchosen(chosenvalue)
console.log(chosen)
}
在此选择函数中打印未定义,因为chosenvalue
未定义并且此变量尚未声明选择函数的范围。
解决问题
if (pressed2) {
button = <Button onClick={Pickuser}>Pick user</Button>
candidatelist = (
<ol>
{details.candidates.map(details =>
// pass appropriate value as parameter what you want to get when the button is clicked. detail or value.
<Button onClick={() => choose(details)}>
{details}
</Button>
)}
</ol>
)
}
...
const choose = (value) => {
console.log(value);
setchosen(value);
}
另一种方法是使用传递的合成事件中的当前目标
const choose = (event) => {
const { currentTarget: { value } } = event;
console.log(value)
setchosen(value)
}
推荐阅读
- ansible - 在主机上运行时出现 Ansible playbook 错误:
- r - 无法使用 ggplot2 显示线和点
- html - 我们服务器正在运行 NGINX,但需要更多配置。我能做些什么?
- php - 为什么执行在 wordpress_remote_post() 函数调用处停止?
- python - 如何在python中保存大量文件
- database - 是否有像 MongoDB Compass for Firebase Firestore 这样的客户端应用程序?
- html - 输入类型电子邮件允许一切
- artifactory - 从 Jfrog 工件中删除工件不会释放磁盘空间
- firebase - 在android studio中将firebase添加到flutter时出错:插件项目:firebase_core_web未找到。请更新 settings.gradle
- java - angularJS 模型上显示多条错误消息