Javascript React-在表单提交中有条件地不发送数据键

如果选中复选框，我试图省略submit上的值

onSubmit

，从而消除了对特定标签/输入的需要。如果我选中

无限运行时

框，

运行时秒

键不再需要在有效负载中发送，这是handleSubmit方法本身所做的事情吗

当表单被提交时，选中复选框，它仍然发送

runTimeSeconds

键，并且仍然发送默认状态值

下面是一个沙箱，用于复制问题：

从“React”导入React；
从“react dom”导入react dom；
导入“/styles.css”；
类参数扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
WindowLength秒数：1，
运行时秒：1，
INDEFINITECKBOX:错误
};
this.handleChange=this.handleChange.bind（this）；
}
handleChange=e=>{
this.setState（{[e.target.name]：e.target.value}）；
本.道具.手柄更换（e）；
console.log（[e.target.value]）；
常数值=
e、 target.type==“复选框”？e.target.checked:e.target.value；
这是我的国家({
[e.target.name]：值
});
};
render（）{
const{indefiniteCheckbox}=this.state；
返回(
不确定运行时间：
{！indefiniteCheckbox&&(
运行时间秒：
)}
窗口长度秒：
);
}
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
运行时秒：1，
WindowLength秒数：1，
INDEFINITECKBOX:错误
};
}
handleChange=（{target:{name，value}}）=>{
this.setState（{[name]：value}）；
log（[name，value]）；
};
handleSubmit=e=>{
e、 预防默认值（）；
数据：JSON.stringify({
参数：{
“stream.runtime.seconds”：this.state.runTimeSeconds，
“stream.window.length.seconds”：this.state.windowLengthSeconds
}
});
console.log（this.state）；
};
render（）{
返回(
参数
提交
{
警觉的(
“确实要取消吗？这样做将重置此页。”
);
}}
>
取消
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

您有两种选择

如果使用三元条件选中复选框，则可以将数据变量设置为

未定义

。在另一种情况下，发送输入中给定的时间：

handleSubmit = e => {
    e.preventDefault();
    const data = JSON.stringify({
        parameters: {
            "stream.runtime.seconds": !this.state.indefiniteCheckbox ? this.state.runTimeSeconds : undefined,
            "stream.window.length.seconds": this.state.windowLengthSeconds
        }
    });
};

或者，您可以在单独的变量中创建有效负载，并在条件匹配时从中删除所需的值：

handleSubmit = e => {
    e.preventDefault();
    const parameters = {
        "stream.runtime.seconds": this.state.runTimeSeconds,
        "stream.window.length.seconds": this.state.windowLengthSeconds
    }
    if (!this.state.indefiniteCheckbox) delete parameters['stream.runtime.seconds']

    const data = JSON.stringify({ parameters });
};

---

请注意，您可能可以在Stack Overflow上使用重新创建沙盒，这样人们就不必去其他站点查看代码的工作情况……感谢您的建议。你认为一个选项应该优先于另一个吗？我宁愿使用第一个选项，因为它更具可读性，并且不会初始化一个值，只是在以后删除它。但是选择取决于您。我使用了第一种方法，在提交时，它仍然看起来像

runTimeSeconds

处于表单状态。选中复选框后，在提交

runTimeSeconds

键时，值仍然在数据负载中发送，这是什么意思。

handleSubmit = e => {
    e.preventDefault();
    const parameters = {
        "stream.runtime.seconds": this.state.runTimeSeconds,
        "stream.window.length.seconds": this.state.windowLengthSeconds
    }
    if (!this.state.indefiniteCheckbox) delete parameters['stream.runtime.seconds']

    const data = JSON.stringify({ parameters });
};