如何创建状态来处理表单中的事件？

Question

如何创建一个状态来在我的表单中的按钮之间切换 true 或 false（是和否）？

我正在尝试使用函数处理状态：

const onMutate = (e) => {
        // toggle
        buttonState = !buttonState;

        // Files
        if (e.target.files) {
            formData = {
                ...formData,
                images: e.target.files
            };
        }

        // texts/number/boolean
        if (!e.target.files) {
            formData = {
                ...formData,
                [e.target.id]: buttonState ?? e.target.value
            };
        }
    };

我的状态：

let buttonState = false;

我将函数 (onMutate) 放入我的事件中：

on:click={onMutate}
on:Change={onMutate}

好的。我可以使用 'on:click' 事件在是或否（真或假）之间切换我的按钮，但是当我输入输入时，我会触发相同的事件并在我的输入中得到真或假。我知道这是一个 javascript 比 Svelte 更重要的问题。我知道问题出在哪里：

// texts/number/boolean
            if (!e.target.files) {
                formData = {
                    ...formData,
                    [e.target.id]: buttonState ?? e.target.value
                };
            }

但是不知道怎么解决

Answer 1

很难理解您到底想要完成什么。但我想我能够找到最有可能是您问题根源的东西。也就是说，您在 formData.

中得到 true 和 false

这是因为您正在使用 ?? 运算符。它的工作方式如下（以 a ?? b 为例）：MDN reference

如果 a 是 null 或 undefined 那么它将 return b
在所有其他情况下它将 return a

在你的情况下 buttonState 既不是 null 也不是 undefined 所以，表达式的值将是 buttonState 的值，即：true 或 false.

我可以假设您想使用一个逻辑，如果 buttonState 是 true，则包含输入值，否则不包含。

正确的表达方式是（使用 conditional ternary operator）：

buttonState ? e.target.value : null

如果 buttonState 是 true，这将产生输入值，如果 buttonState 是 false，这将产生输入值 null。当然，您可以使用其他值代替 null 来表示 false 状态。

一些补充说明：

按钮状态在每个事件中切换，包括 onChange 事件。我不知道这是否是故意的，但看起来很奇怪，当您在输入框中输入内容时，您的按钮会翻转关闭。如果按钮有自己的事件处理程序会更合乎逻辑，它可以像这样简单：

<button on:click={()=> buttonState=!buttonState}>....

注意#2：如果您在 REPL 中提供一个小型工作模型并在您的问题中 link ，这对那些想帮助您的人来说真的很有用。很高兴您提供了部分代码，但仍然很难弄清楚它应该如何工作。我知道这是额外的工作，但会让你得到更快更好的回应。

如何创建状态来处理表单中的事件？

How do I create a state to handle events in my form?

javascript

svelte

sveltekit