英文:
How can I send a checkbox's value when it's checked by default?
问题
在我们的事件应用中，有一个报名表单，其中包含一组复选框，用于用户报名事件时选择原因。在我们的事件页面上，也有一个类似的报名表单，但在事件页面上报名时，用户已经明示了他们想参加事件，所以我希望无论何时报名，都默认传递“我想参加事件”的复选框值。目前，我已经将它默认设置为已选中，但我对如何默认发送该值并将这些值存储在'reasons'中感到困惑。当点击提交按钮时，'reasons'中没有任何内容，但我始终需要每次至少有一个原因。
const [reasons, setReasons] = useState([])
当复选框被选中时会发生什么
const onReasonChange = event => {
// 如果已经选择了该原因，则移除原因
if (reasons.includes(event.target.value)) {
setReasons(reasons.filter(reason => reason !== event.target.value))
return
}
// 否则，添加该原因
setReasons([...reasons, event.target.value])
}
我试图让复选框始终发送以下值
<input
id="attend"
type="checkbox"
value="我想参加事件"
onChange={onReasonChange}
checked={reasons.includes("我想参加事件")}
/>
英文:
I have an event app with a signup form with a list of checkboxes that contain reasons as to why the user wants to sign up for events. On our events page we have a similar signup form, however when signing up on the events page it's already implied they want to attend events, so I want to always pass the "I want to attend events" checkbox value when they signup. Currently, I have it set to it's checked every by default but I'm confused on how to also send that value by default, storing these values in 'reasons'. When submit is clicked, nothing populates for reasons but I always need at least one reason each time
const [reasons, setReasons] = useState([])
what happens when a checkbox is checked
const onReasonChange = event => {
// Remove the reason if already selected
if (reasons.includes(event.target.value)) {
setReasons(reasons.filter(reason => reason !== event.target.value))
return
}
// Add the reason
setReasons([...reasons, event.target.value])
}
the checkbox i'm trying to get to always send the value of
<input
id="attend"
type="checkbox"
value="I want to attend events"
onChange={onReasonChange}
checked={reasons.includes("I want to attend events"), 'checked'}
/>
答案1
得分: 0
在你的状态中包含默认值并使复选框被选中的最简单方法是使用默认值初始化状态。
如果顺序不重要，你的状态也可以更好地作为一个 Set。
// 保存你重复的字符串字面值
const attendReason = "我想参加活动";
const [reasons, setReasons] = useState(new Set([attendReason]));
const onReasonChange = ({ target: { checked, value } }) => {
setReasons((prev) => {
prev[checked ? "add" : "delete"](value);
return new Set(prev);
});
};
<input
name="attend"
type="checkbox"
value={attendReason}
checked={reasons.has(attendReason)}
onChange={onReasonChange}
/>
英文:
The simplest way to include the default value in your state and have the checkbox be checked is to initialise the state with the default value.
Your state could also work better as a Set if order isn't important
// Saves you repeating string literals
const attendReason = "I want to attend events";
const [reasons, setReasons] = useState(new Set([attendReason]));
const onReasonChange = ({ target: { checked, value } }) => {
setReasons((prev) => {
prev[checked ? "add" : "delete"](value);
return new Set(prev);
});
};
<input
name="attend"
type="checkbox"
value={attendReason}
checked={reasons.has(attendReason)}
onChange={onReasonChange}
/>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论