我正在研究React应用程序,我正在使用fetch来发送请求.我最近制作了一个Sign Up表单,现在我正在将它与它的API集成.以前,API接受了url编码数据,并且一切正常.但是现在需求已经改变并且API接受JSON中的数据,我不得不将内容类型头从'application/x-www-form-urlencoded'更改为'application/json'.但是我收到以下错误:
Fetch API无法加载http://local.moberries.com/api/v1/candidate.对预检请求的响应未通过访问控制检查:请求的资源上不存在"Access-Control-Allow-Origin"标头.因此不允许来源' http:// localhost:3000 '访问.如果不透明响应满足您的需求,请将请求的模式设置为"no-cors"以获取禁用CORS的资源.
我甚至在API中设置了"Access-Control-Allow-Headers",但它仍然无效.以下是客户端的相关代码:
sendFormData() {
let {user} = this.props;
var formData = {
first_name: ReactDOM.findDOMNode(this.refs.firstName).value,
last_name: ReactDOM.findDOMNode(this.refs.lastName).value,
city: ReactDOM.findDOMNode(this.refs.currentCity).value,
country: ReactDOM.findDOMNode(this.refs.currentCountry).value,
is_willing_to_relocate: user.selectedOption,
cities: relocateTo,
professions: opportunity,
skills: skills,
languages: language,
min_gross_salary: minSal,
max_gross_salary: maxSal,
email: ReactDOM.findDOMNode(this.refs.email).value,
password: ReactDOM.findDOMNode(this.refs.password).value
};
var request = new Request('http://local.moberries.com/api/v1/candidate', {
method: 'POST',
mode: 'cors',
headers: new Headers({
'Accept': 'application/json',
'Content-Type': 'application/json'
})
});
var requestBody = JSON.stringify(formData);
console.log(requestBody);
fetch(request, {body: requestBody})
.then(
function (response) {
if (response.status …
Run Code Online (Sandbox Code Playgroud) 我正在使用Draft.js向我的React应用程序引入文本编辑器.我已经使它适用于粗体,斜体和下划线,但我无法弄清楚如何将文本更改为项目符号.我已阅读文档,但找不到任何有用的信息.有人可以帮忙吗?
我正在使用react-image-gallery来查看页面上的图像.现在我需要在按钮点击时实现放大和缩小功能.我已经对react-gallery-gallery的文档进行了详尽的阅读,但我找不到任何有用的信息.有一个名为renderCustomControls的道具,我用它来显示左上角的缩放功能按钮,如下所示:
但我不知道如何做到这一点.任何形式的帮助将不胜感激.这是一些相关的代码:
export class CVPreview extends React.Component {
constructor(props) {
super(props)
this.state = {
images: []
}
this.renderCustomControls = this.renderCustomControls.bind(this)
}
renderCustomControls() {
return(
<span>
<FloatingActionButton mini={true} secondary={true}>
<ContentAdd />
</FloatingActionButton>
<FloatingActionButton mini={true} secondary={true}>
<ContentRemove />
</FloatingActionButton>
</span>
)
}
render() {
const { openCVPreviewModal, onRequestClose } = this.props
return (
<Dialog
className="cv-preview"
titleClassName="cv-preview-title"
contentClassName="cv-preview-content"
bodyClassName="cv-preview-body"
modal={false}
open={openCVPreviewModal}
autoDetectWindowHeight={false}
onRequestClose={onRequestClose}>
<IconButton
className='close-icon'
onClick={onRequestClose}>
<ClearIcon />
</IconButton>
{
this.state.images.length > 0 &&
<ImageGallery
items={this.state.images}
renderItem={this.renderItem}
renderLeftNav={this.renderLeftNav}
renderRightNav={this.renderRightNav}
showThumbnails={false}
showPlayButton={false} …
Run Code Online (Sandbox Code Playgroud) 我有一个函数调用一个返回 Promise 的函数。这是它的代码:
export const func1 = ({
contentRef,
onShareFile,
t,
trackOnShareFile,
}) => e => {
trackOnShareFile()
try {
func2(contentRef).then(url => {
onShareFile({
title: t('shareFileTitle'),
type: 'application/pdf',
url,
})
}).catch(e => {
if (process.env.NODE_ENV === 'development') {
console.error(e)
}
})
e.preventDefault()
} catch (e) {
if (process.env.NODE_ENV === 'development') {
console.error(e)
}
}
}
Run Code Online (Sandbox Code Playgroud)
而且func2
,被称作func1
是这样的:
const func2 = element => {
return import('html2pdf.js').then(html2pdf => {
return html2pdf.default().set({ margin: 12 }).from(element).toPdf().output('datauristring').then(pdfAsString => {
return pdfAsString.split(',')[1]
}).then(base64String …
Run Code Online (Sandbox Code Playgroud) 我用了创建折线图react-highcharts
.它有3个系列和不同的数据.我有一个范围选择器,可以动态更改系列的数据.该图表如下所示:
它工作得很好,但问题是每当我更改范围选择器上的风险值时,图表会重新呈现新系列的数据.我不希望它每次都重新渲染.我希望系列的数据随动画变化.像这样的东西:实时随机数据.这是我的相关代码:
class ContributionRiskGraph extends React.Component {
constructor() {
super();
this.state = {
riskValue: 8.161736
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(value) {
this.setState({
riskValue: value
});
}
render() {
const riskValue = this.state.riskValue / 100;
const LBData = getGraphPlotData(riskValue, 'lowerBound');
const EVData = getGraphPlotData(riskValue, 'expectedValue');
const UBData = getGraphPlotData(riskValue, 'upperBound');
const config = {
chart: {
animation: {
duration: 1000
}
},
title: {
text: 'Contribution Risk Graph'
},
series: [
{
name: 'Lower Bound',
data: …
Run Code Online (Sandbox Code Playgroud) reactjs ×5
javascript ×3
charts ×1
content-type ×1
cors ×1
draftjs ×1
fetch ×1
highcharts ×1
jestjs ×1
json ×1
react-redux ×1
unit-testing ×1