Javascript React Js文本框向输入添加反斜杠

下面是我用来获取react应用程序用户输入的代码。我面临的问题是react向用户输入添加了额外的反斜杠

用户提供以下查询的示例

_sourceCategory=extension_registry_business NOT _sourceHost=*b1-prv NOT _sourceHost=*g1-iad | json auto keys \"event\", \"dimensions.os\" as event, os | where event = \"xmtDownload\" | count(os) as downloadCount group by os | format( \"{\\\"os\\\":\\\"%s\\\",\\\"count\\\":%s}\", os, downloadCount) as jsonObject | fields jsonObject

它被转换为以下格式（请注意额外的反斜杠）

我试过了 -var sprintf=require（'sprintf-js'）。sprintf，

• vsprintf=require（'sprintf-js'）。vsprintf

JSON.parse

从“React”导入React，{Component}
从“振幅js”导入振幅
从“语义ui反应”导入{标题、表单、输入、按钮、文本区域}
从“语义ui日历反应”导入{DateTimeInput，DateInput}；
var sprintf=require（'sprintf-js'）。sprintf，
vsprintf=require（'sprintf-js'）。vsprintf
类探索者SumoQuery扩展组件{
建造师（道具）{
超级（道具）
此.state={
“发件人”：“”，
“至”：”，
“密码”：“”，
“用户名”：“”，
“查询”：”
}
}
handleDateChange=（事件，{name，value}）=>{
if（this.state.hasOwnProperty（名称））{
this.setState（{[name]：value}）；
}
}
postRequests=async（）=>{
const response=await fetch（'/api/v1/sumo query api/run/'{
方法：“POST”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
},
正文：{
“用户名”：this.state.userName，
“密码”：this.state.password，
“查询”：this.state.query，
“from”：this.state.from，
“to”：this.state.to
}
});
const body=wait response.json（）；
if（response.status！==201）抛出错误（body.message）；
控制台日志（主体）；
返回体；
};
提交任务=（e）=>{
e、 预防默认值（）
this.postRequests（）.then（response=>{
控制台日志（响应）；
返回响应；
})。然后（数据=>{
控制台日志（数据）；
this.setState（{returnVal:data}）；
}).catch（错误=>{
控制台日志（err）；
this.setState（{err:err}）；
});
};
render（）{
返回(
Sumo查询访问管理
this.setState（{userName:e.target.value}）
/>
this.setState（{密码：e.target.value}）}
/>
this.setState（{query:e.target.value}）}
/>
提交
)
}
}
导出默认的ExplorerSumoQuery
```

当您说“react是向用户输入添加额外的反斜杠”时，它是何时添加反斜杠的？提交时是否为

onSubmit

？这是正确的。提交后发生的是我收回它，是在更改事件中。那么键入``时会发生什么？它逃脱了吗？

_sourceCategory=extension_registry_business NOT _sourceHost=*b1-prv NOT _sourceHost=*g1-iad | json auto keys \\\"event\\\", \\\"dimensions.os\\\" as event, os | where event = \\\"xmtDownload\\\" | count(os) as downloadCount group by os | format( \\\"{\\\\\\\"os\\\\\\\":\\\\\\\"%s\\\\\\\",\\\\\\\"count\\\\\\\":%s}\\\", os, downloadCount) as jsonObject | fields jsonObject

    import React, {Component} from 'react'
    import amplitude from 'amplitude-js'
    import {Header,Form, Input, Button,TextArea} from 'semantic-ui-react'
    import { DateTimeInput , DateInput} from 'semantic-ui-calendar-react';
    
    var sprintf = require('sprintf-js').sprintf,
    vsprintf = require('sprintf-js').vsprintf
    class ExplorerSumoQuery extends Component {
        constructor(props) {
            super(props)
            this.state = {
                "from":'',
                "to":'',
                "password":'',
                "userName":'',
                "query":''
    
            }
        }
        handleDateChange = (event, {name, value}) => {
            if (this.state.hasOwnProperty(name)) {
              this.setState({ [name]: value });
            }
        }
    
    
        postRequests = async () => {
            const response = await fetch( '/api/v1/sumo-query-api/run/', {
                method: 'POST',
                headers: {
                  'Accept': 'application/json',
                  'Content-Type': 'application/json'
                },
                body: {
                    "userName":this.state.userName,
                    "password":this.state.password,
                    "query":this.state.query,
                    "from":this.state.from,
                    "to":this.state.to
                }
    
    
            });
            const body = await response.json();
            if (response.status !== 201) throw Error(body.message);
            console.log(body);
            return body;
        };
        
    
        submitRequests =  (e) => {
            e.preventDefault()        
            this.postRequests().then(response => {
                console.log(response);
                return response;
            }).then(data => {
                console.log(data);
                this.setState({returnVal:data});
            }).catch(err => {
                console.log(err);
                this.setState({err:err});
            });
    
        };
    
        render() {
            return (
                <Form>
                  <Header as='h2'>Sumo Query Access Management</Header>
                  <Form.Group widths='equal'>
                    <Form.Field
                    control={Input}
                    required
                    name='UserName'
                    type="text"
                    label="Sumologic api user name "
                    value={this.state.userName}
                    onChange={e => this.setState({ userName: e.target.value })}
                    />
          
                    <Form.Field
                    control={Input}
                    required
                    name='Password'
                    type="password"
                    label="Sumologic api password "
                    value={this.state.password}
                    onChange={e => this.setState({ password: e.target.value })}
                    />
    
                  </Form.Group>
                  <Form.Group grouped>
                    <Form.Field
                        control={Input}
                        required
                        name='Sumo Query'
                        type="text"
                        label="Sumo Query"
                        value={this.state.query}
                        onChange={e => this.setState({ query: e.target.value })}
                    />
    
    
                    <DateTimeInput
                    name="from"
                    placeholder="from"
                    value={this.state.from}
                    iconPosition="left"
                    onChange={this.handleDateChange}
                    />
    
                    <DateTimeInput
                    name="to"
                    placeholder="to"
                    value={this.state.to}
                    iconPosition="left"
                    onChange={this.handleDateChange}
                    />
    
    
    
                  </Form.Group>
    
                  <Button onClick={this.submitRequests} size='small' basic>
                        Submit
                    </Button>
                </Form>
              )
        }
    
    }
    
    export default ExplorerSumoQuery
    
    ```