87 lines
3.6 KiB
TypeScript
87 lines
3.6 KiB
TypeScript
import {ChangeEvent, Component} from "react";
|
||
import {Input, InputNumber, Switch} from "antd";
|
||
import style from "./Http.module.less"
|
||
const defaultData:OptionsData = {
|
||
code: "UTF-8",
|
||
redirect: false,
|
||
requestSwitch: true,
|
||
timeout: 5000,
|
||
uploadType: "HttpClient4"
|
||
|
||
}
|
||
|
||
class Options extends Component<HttpProps<OptionsData>,HttpState<OptionsData>>{
|
||
constructor(props:HttpProps<OptionsData>) {
|
||
super(props);
|
||
this.state = {
|
||
options:Object.assign({},defaultData,this.props.data)
|
||
}
|
||
}
|
||
domChange(e:ChangeEvent<HTMLInputElement>,key:OptionsDataType){
|
||
const value = e.target.value
|
||
const options = this.state.options
|
||
options[key] =value
|
||
this.setState({options:Object.assign({},{...this.state.options},options)})
|
||
this.change()
|
||
}
|
||
valueChange(value:string|number|boolean,key:string){
|
||
const options = this.state.options
|
||
options[key] =value
|
||
this.setState({options:Object.assign({},{...this.state.options},options)})
|
||
this.change()
|
||
}
|
||
change(){
|
||
this.props.onchange("options",this.state.options)
|
||
}
|
||
render() {
|
||
return <div className={style.HttpContentFlex}>
|
||
<div className={style.HttpOptionFlex}>
|
||
<div>
|
||
<div className={style.HttpTitle}>内容编码</div>
|
||
<p>通常用于在发送请求时对指定内容的字符集，以防止请求出现乱码或服务器无法正确处理请求</p>
|
||
</div>
|
||
<div>
|
||
<Input value={this.state.options.code} onChange={(e)=>this.domChange(e,"code")} defaultValue="UTF-8" />
|
||
</div>
|
||
</div>
|
||
<div className={style.HttpOptionFlex}>
|
||
<div>
|
||
<div className={style.HttpTitle}>上传类型</div>
|
||
<p>所上传文件的文件类型</p>
|
||
</div>
|
||
<div>
|
||
<Input value={this.state.options.uploadType} onChange={(e)=>this.domChange(e,"uploadType")} defaultValue="HttpClient4" />
|
||
</div>
|
||
</div>
|
||
<div className={style.HttpOptionFlex}>
|
||
<div>
|
||
<div className={style.HttpTitle}>请求开关</div>
|
||
<p>对POST使用multipart/from-data</p>
|
||
</div>
|
||
<div>
|
||
<Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={(e)=>this.valueChange(e,"requestSwitch")} defaultChecked checked={this.state.options.requestSwitch} />
|
||
</div>
|
||
</div>
|
||
<div className={style.HttpOptionFlex}>
|
||
<div>
|
||
<div className={style.HttpTitle}>超时时间</div>
|
||
<p>所上传文件的文件类型</p>
|
||
</div>
|
||
<div>
|
||
<InputNumber addonAfter="ms" defaultValue={5000} onChange={(e)=>this.valueChange(e,"timeout")} value={this.state.options.timeout} />
|
||
</div>
|
||
</div>
|
||
<div className={style.HttpOptionFlex}>
|
||
<div>
|
||
<div className={style.HttpTitle}>跟随重定向</div>
|
||
<p>跟随重定向，会详细记录重定向的过程，可以卡电脑多个重定向的请求</p>
|
||
</div>
|
||
<div>
|
||
<Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked checked={this.state.options.redirect} />
|
||
</div>
|
||
</div>
|
||
</div>;
|
||
}
|
||
}
|
||
export default Options
|