reactjs 表单中的可选字段,如何分配false而不是error？

km0tfn4u 于 2022-12-29 发布在 React

关注(0)|答案(2)|浏览(123)

我遇到了一个有趣的问题。我有一个带有可选字段的表单。在提交时，我尝试将一个空字段赋给一个变量时遇到了一个错误。如果该字段为空，我想将其赋为false。如何正确地做到这一点？写多个if对我来说似乎是一个疯狂的想法。

`async function submit(e) {
    const name = e.target.name.value
    const adress = e.target.adress.value
    const comment = e.target.comment.value
}`

我尝试这样，但仍然得到错误

`async function submit(e) {
    const name = e.target.name.value || false
    const adress = e.target.adress.value || false
    const comment = e.target.comment.value || false
}`

- 类型错误：无法读取未定义的属性（读取"value"）**

reactjs

来源：https://stackoverflow.com/questions/74932222/optional-fields-in-the-form-how-to-assign-false-instead-of-error

2条答案

按热度按时间

9ceoxa921#

您遇到的问题是name、address或comment中有一个是undefined。
您可以通过可选的链接和空合并（??）来解决这个问题：

async function submit(e) {
    const name = e.target.name?.value ?? false
    const adress = e.target.adress?.value ?? false
    const comment = e.target.comment?.value ?? false
}

如果您使用的是旧版本的JavaScript，它不支持上面提到的特性，您必须使用更详细的语法：

async function submit(e) {
    const name = e.target.name && (e.target.name.value || false)
    const adress = e.target.adress && (e.target.address.value || false)
    const comment = e.target.comment && (e.target.comment.value || false)
}

赞(0）回复(0）举报 2022-12-29

ie3xauqp2#

无论您是使用三元运算符还是空合并，

//ternary operator method 
async function submit(e) {
    const name = e.target.name?.value ? e.target.name?.value : false;
    const address = e.target.address?.value ? e.target.address?.value : false;
    const comment = e.target.comment?.value ? e.target.comment?.value : false;
}
//nullish coalescing method
async function submit(e) {
    const name = e.target.name?.value ?? false;
    const address= e.target.address?.value ?? false;
    const comment = e.target.comment?.value ?? false;
}

赞(0）回复(0）举报 2022-12-29

我来回答

reactjs 表单中的可选字段,如何分配false而不是error？

2条答案

相关问题

热门标签

最新问答