Javascript 用于在React/Typescript中处理多个开关控件的函数
我试图做的是发送多路开关控制的post请求,但是我认为它们必须是一种更容易发送请求的方式,而不是为每个开关输入单独编写请求。我如何合并或编写一个可以干净地完成这项工作的函数?使用Typescript/React。问题更新如下:Javascript 用于在React/Typescript中处理多个开关控件的函数,javascript,reactjs,typescript,ecmascript-2016,Javascript,Reactjs,Typescript,Ecmascript 2016,我试图做的是发送多路开关控制的post请求,但是我认为它们必须是一种更容易发送请求的方式,而不是为每个开关输入单独编写请求。我如何合并或编写一个可以干净地完成这项工作的函数?使用Typescript/React。问题更新如下: UPDATE:我要做的是将开关输入控件的状态作为切换发送。即,当开关控制设置为是/否时,它会向服务器发送post请求 interface IState { checkedA?: boolean; checkedB?: boolean; } publi
UPDATE:我要做的是将开关输入控件的状态作为切换发送。即,当开关控制设置为是/否时,它会向服务器发送post请求
interface IState {
checkedA?: boolean;
checkedB?: boolean;
}
public render() {
const {} = this.state;
<div className={classes.switchContainer}>
<FormGroup row>
<FormControlLabel
control={
<Switch
checked={this.state.checkedA}
onChange={this.handleChange}
value="checkedA"
>Toggle</Switch>
}label="YES"
/>
<Typography color="secondary" variant="body1" className={classes.toggleQuestions}>Question 1</Typography>
</FormGroup>
</div>
interface-IState{
checkedA?:布尔;
checkedB?:布尔值;
}
公共渲染(){
const{}=this.state;
问题1
问题2
)}
发送请求下面是一个示例,说明如何在表单提交时以编程方式访问输入:
private handleSubmit = (e: React.FormEvent): void => {
e.preventDefault();
// We want the form as a starting point to traverse the DOM
const form = e.target;
// It seems like we can be relatively sure that all the information
// we want is contained in the form's inputs, so we'll select them all
const inputs = form.querySelectorAll('input');
// With the NodeList inputs (a DOM data type), we can use .forEach
// to check out all the nodes by their type
inputs.forEach(input => {
// Accessing the name and value will give you all
// the information you need to build up a POST request
switch(input.type) {
case 'checkbox':
console.log('The checkbox is called', input.name, 'and its checked state is', input.checked);
break;
case 'text':
console.log('The text input is called', input.name, 'and it says', input.value);
break;
}
});
}
下面是一个示例,说明如何在.forEach循环中潜在地构建一个请求对象,构建一个要发送到请求中的对象。如果您确保为每个项目使用正确的名称道具,您可以非常轻松地完成此操作
// in the above method
const request = {};
inputs.forEach(input => {
// Somehow map the input name and value to your data model you're updating
request[input.name] = input.value;
});
await axios.post(/* use request object here */);
希望这足以让您开始,但如果您有任何具体的实施细节需要讨论,请随时发表评论!:D你在哪里提出请求?只是在一个伪post请求中添加了@jmargolisvtIt,现在还不清楚你的组件在这里做什么。也许试着解释一下你的例子?我不知道开关从哪里来,或者它应该做什么。开关应该是复选框吗?当用户选中此框时,是否立即发送请求?等等,刚刚更新了代码。我要做的是将开关输入控件的状态作为切换发送。即,当开关控制设置为是/否时,它会向服务器@Morganyeah发送一个post请求,但有点丢失;我正在关注这里发生的事情,我正在理解如何使用循环中的输入,但是我正在使用带有typescript的开关切换。根据我的示例,我发布了如何使用您的示例?@KoryJ.Campbell我认为您太过关注这样一个事实,即它是一个名为Switch的任意组件。它只是一天结束时DOM中的一个元素。看起来您所要做的就是在querySelectorAll步骤中找到一种针对交换机组件的方法。也许给它一个类名,或者以另一种方式定位它。
// in the above method
const request = {};
inputs.forEach(input => {
// Somehow map the input name and value to your data model you're updating
request[input.name] = input.value;
});
await axios.post(/* use request object here */);