从React组件更新模型/集合

时间:2014-05-06 14:12:35

标签: javascript backbone.js reactjs

我看到很多使用React和骨干的例子,然而有些事情对我来说仍然有点不清楚。在几乎所有示例中,它们都显示了如何让组件听取模型或集合并相应地更新视图,这看起来非常简单,您可以使用Backbone Mixin或者您可以在" componentDidMount中设置一些事件监听器( )"

我不清楚的是如何处理另一种方式,即当用户在某个输入字段中写入时,我想在我的模型上设置相同的值,这最终是我验证然后保存在服务器上

使用简单表单,这也非常简单,您可以为onChange事件设置回调,例如:

return <div><input type="text" onChange={this.setPrice} /></div>

一切都很好,在setPrice函数中,我现在可以执行以下操作:

this.props.myModel.set('price', e.target.value);

这样可行,但有两件事立刻打动了我: 因为Reacts&#34; onChange&#34;当你在文本框中输入时,实际上会在每个键事件上执行。

我的第二个问题是,这适用于简单表单,但是我们的表单有超过30-40个不同的输入字段,在所有这些输入框上都有onChange事件,复选框以及你看起来适得其反的东西。

现在,我们在Backbone Views中有一个数据绑定,它只是简单地设置用户在模型上的这些输入字段上输入的内容,但这似乎不是React的方式,因为如果你使用某些东西会更新比如ReactLink就是&#34; state&#34;在Component上,而不是直接在模型上的属性。

这里有最好的做法,还是这个&#34;婚姻&#34; React和Backbone之间根本不是什么意思?看起来好像你需要以某种方式将每个输入字段映射到模型上的特定属性。我不确定这对React来说是不是一件好事。

由于

1 个答案:

答案 0 :(得分:0)

您可以调用setwd("C:/Users/user/Desktop") library(forecast) library(vars) library(tseries) cay <- read.csv("C:/Users/User/Desktop/cay.csv") sp500 <- read.csv("C:/Users/User/Desktop/sp500.csv") cay_indicator <- cay$indicator cay <- cay$cay sp500c <- sp500[,2] sp500c <- data.matrix(sp500c) sp500c.ts=ts(data = sp500c, start = c(1950,2), end = c(2015,4), frequency = 4) plot(sp500c.ts) sp500=ts(data = sp500c, start = c(1953, 1), end = c(2014, 3), frequency = 4) cay=ts(data = cay, start = c(1953, 2), end = c(2014, 3), frequency = 4) pp.test(sp500) adf.test(sp500) returnsp500=diff(log(sp500)) pp.test(returnsp500) adf.test(returnsp500) var1=ts(cbind(returnsp500, cay), start = c(1953, 2), end = c(2014, 3), frequency = 4) var1 var2=ts(cbind(returnsp500, cay_indicator), start = c(1953, 2), end = c(2014, 3), frequency = 4) var2 var3=ts(cbind(returnsp500, cay, cay_indicator), start = c(1953, 2), end = c(2014, 3), frequency = 4) var3 layout(1) plot(var3,type="l",col="blue",main="Stock Price, Consumption Wealth Ratio, Negativity Indicator") acf(var1, lag.max=24) acf(var2, lag.max=24) acf(var3,lag.max=24) info.crit1=VARselect(var1,lag.max=5,type="const") info.crit2=VARselect(var2,lag.max=5,type="const") info.crit3=VARselect(var3,lag.max=5,type="const") info.crit1 info.crit2 info.crit3 model1=VAR(var1,p=1,type="const") model1 summary(model1) model2=VAR(var2,p=1,type="const") model2 summary(model2) model3=VAR(var3,p=1,type="const") model3 summary(model3) causality(model1,cause="cay")$Granger causality(model2,cause="cay_indicator")$Granger n.end=127 t=length(returnsp500) n=t-n.end-3 pred1=matrix(rep(0,4*n),n,4) pred2=matrix(rep(0,4*n),n,4) pred3=matrix(rep(0,4*n),n,4) pred4=matrix(rep(0,4*n),n,4) for(i in 1:n){ x_var=var1[1:n.end+i-1,] x_var2=var2[1:n.end+i-1,] x_var3=var3[1:n.end+i-1,] x_ar=returnsp500[1:n.end+i-1] model.var=VAR(x_var,p=1,type="const") for_var=predict(model.var,n.ahead=1,se.fit=FALSE) pred1[i,1]=for_var$fcst$returnsp500[,1] model.var=VAR(x_var2,p=1,type="const") for_var=predict(model.var,n.ahead=1,se.fit=FALSE) pred2[i,1]=for_var$fcst$returnsp500[,1] model.var=VAR(x_var3,p=1,type="const") for_var=predict(model.var,n.ahead=1,se.fit=FALSE) pred3[i,1]=for_var$fcst$returnsp500[,1] model.ar=arima(x_ar,order=c(1,0,0),method="ML") pred4[i,1]=predict(model.ar,n.ahead=1,se.fit=FALSE)[1] } pred1.ts=ts(data=pred1,start=c(1985,1),frequency=4) pred2.ts=ts(data=pred2,start=c(1985,1),frequency=4) pred3.ts=ts(data=pred3,start=c(1985,1),frequency=4) pred4.ts=ts(data=pred4,start=c(1985,1),frequency=4) logsp500returns.ts=ts(data=returnsp500[(n.end+1):(t-3)],start=c(1985,1),frequency=4) plot(logsp500returns.ts,col="blue",ylim=c(-.1,.1)) lines(pred1.ts[,1],col="green") lines(pred2.ts[,1],col="red") lines(pred3.ts[,1],col="black") lines(pred4.ts[,1],col="yellow") pred1.ts e1_var=returnsp500[(n.end+1):(t-3)]-pred1.ts[,1] #1-step ahead bivariate cay & sp500 e2_var=returnsp500[(n.end+1):(t-3)]-pred2.ts[,1] #1-step ahead bivariate cay_indicator & sp500 e3_var=returnsp500[(n.end+1):(t-3)]-pred3.ts[,1] #1-step ahead bivariate cay and cay_indicator & sp500 e4_var=returnsp500[(n.end+1):(t-3)]-pred4.ts[,1] #1-step ahead univariate model just a lagged sp500 n.end=127 t=length(returnsp500) n=t-n.end-3 pred1=matrix(rep(0,4*n),n,4) pred2=matrix(rep(0,4*n),n,4) pred3=matrix(rep(0,4*n),n,4) pred4=matrix(rep(0,4*n),n,4) for(i in 1:n){ x_var=var1[1:n.end+i-1,] x_var2=var2[1:n.end+i-1,] x_var3=var3[1:n.end+i-1,] x_ar=returnsp500[1:n.end+i-1] model.var=VAR(x_var,p=1,type="const") for_var=predict(model.var,n.ahead=2,se.fit=FALSE) pred1[i,1:2]=for_var$fcst$returnsp500[1:2] model.var=VAR(x_var2,p=1,type="const") for_var=predict(model.var,n.ahead=2,se.fit=FALSE) pred2[i,1:2]=for_var$fcst$returnsp500[1:2] model.var=VAR(x_var3,p=1,type="const") for_var=predict(model.var,n.ahead=2,se.fit=FALSE) pred3[i,1:2]=for_var$fcst$returnsp500[1:2] model.ar=arima(x_ar,order=c(1,0,0),method="ML") pred4[i,1:2]=predict(model.ar,n.ahead=2,se.fit=FALSE)[1] } pred1.ts=ts(data=pred1,start=c(1985,2),frequency=4) pred2.ts=ts(data=pred2,start=c(1985,2),frequency=4) pred3.ts=ts(data=pred3,start=c(1985,2),frequency=4) pred4.ts=ts(data=pred4,start=c(1985,2),frequency=4) logsp500returns.ts=ts(data=returnsp500[(n.end+2):(t-2)],start=c(1985,2),frequency=4) plot(logsp500returns.ts,col="blue",ylim=c(-.1,.1)) lines(pred1.ts[,2],col="green") lines(pred2.ts[,2],col="red") lines(pred3.ts[,2],col="black") lines(pred4.ts[,2],col="yellow") e1_var2=returnsp500[(n.end+2):(t-2)]-pred1.ts[,2] #2-step ahead bivariate cay & sp500 e2_var2=returnsp500[(n.end+2):(t-2)]-pred2.ts[,2] #2-step ahead bivariate cay_indicator & sp500 e3_var2=returnsp500[(n.end+2):(t-2)]-pred3.ts[,2] #2-step ahead bivariate cay and cay_indicator & sp500 e4_var2=returnsp500[(n.end+2):(t-2)]-pred4.ts[,2] #2-step ahead univariate model just a lagged sp500 n.end=127 t=length(returnsp500) n=t-n.end-3 pred1=matrix(rep(0,4*n),n,4) pred2=matrix(rep(0,4*n),n,4) pred3=matrix(rep(0,4*n),n,4) pred4=matrix(rep(0,4*n),n,4) for(i in 1:n){ x_var=var1[1:n.end+i-1,] x_var2=var2[1:n.end+i-1,] x_var3=var3[1:n.end+i-1,] x_ar=returnsp500[1:n.end+i-1] model.var=VAR(x_var,p=1,type="const") for_var=predict(model.var,n.ahead=3,se.fit=FALSE) pred1[i,1:3]=for_var$fcst$returnsp500[1:3] model.var=VAR(x_var2,p=1,type="const") for_var=predict(model.var,n.ahead=3,se.fit=FALSE) pred2[i,1:3]=for_var$fcst$returnsp500[1:3] model.var=VAR(x_var3,p=1,type="const") for_var=predict(model.var,n.ahead=3,se.fit=FALSE) pred3[i,1:3]=for_var$fcst$returnsp500[1:3] model.ar=arima(x_ar,order=c(1,0,0),method="ML") pred4[i,1:3]=predict(model.ar,n.ahead=3,se.fit=FALSE)[1] } pred1.ts=ts(data=pred1,start=c(1985,3),frequency=4) pred2.ts=ts(data=pred2,start=c(1985,3),frequency=4) pred3.ts=ts(data=pred3,start=c(1985,3),frequency=4) pred4.ts=ts(data=pred4,start=c(1985,3),frequency=4) logsp500returns.ts=ts(data=returnsp500,start=c(1985,3), end = c(2014,2),frequency=4) plot(logsp500returns.ts,col="blue",ylim=c(-.1,.1)) lines(pred1.ts[,3],col="green") lines(pred2.ts[,3],col="red") lines(pred3.ts[,3],col="black") lines(pred4.ts[,3],col="yellow") e1_var3=returnsp500[(n.end+2):(t-2)]-pred1.ts[,3] #3-step ahead bivariate cay & sp500 e2_var3=returnsp500[(n.end+2):(t-2)]-pred2.ts[,3] #3-step ahead bivariate cay_indicator & sp500 e3_var3=returnsp500[(n.end+2):(t-2)]-pred3.ts[,3] #3-step ahead bivariate cay and cay_indicator & sp500 e4_var3=returnsp500[(n.end+2):(t-2)]-pred4.ts[,3] #3-step ahead univariate model just a lagged sp500 n.end=127 t=length(returnsp500) n=t-n.end-3 pred1=matrix(rep(0,4*n),n,4) pred2=matrix(rep(0,4*n),n,4) pred3=matrix(rep(0,4*n),n,4) pred4=matrix(rep(0,4*n),n,4) for(i in 1:n){ x_var=var1[1:n.end+i-1,] x_var2=var2[1:n.end+i-1,] x_var3=var3[1:n.end+i-1,] x_ar=returnsp500[1:n.end+i-1] model.var=VAR(x_var,p=1,type="const") for_var=predict(model.var,n.ahead=4,se.fit=FALSE) pred1[i,1:4]=for_var$fcst$returnsp500[1:4] model.var=VAR(x_var2,p=1,type="const") for_var=predict(model.var,n.ahead=4,se.fit=FALSE) pred2[i,1:4]=for_var$fcst$returnsp500[1:4] model.var=VAR(x_var3,p=1,type="const") for_var=predict(model.var,n.ahead=4,se.fit=FALSE) pred3[i,1:4]=for_var$fcst$returnsp500[1:4] model.ar=arima(x_ar,order=c(1,0,0),method="ML") pred4[i,1:4]=predict(model.ar,n.ahead=4,se.fit=FALSE)[1] } pred1.ts=ts(data=pred1,start=c(1985,4),frequency=4) pred2.ts=ts(data=pred2,start=c(1985,4),frequency=4) pred3.ts=ts(data=pred3,start=c(1985,4),frequency=4) pred4.ts=ts(data=pred4,start=c(1985,4),frequency=4) logsp500returns.ts=ts(data=returnsp500[(n.end+4):t],start=c(1985,4),frequency=4) plot(logsp500returns.ts,col="blue",ylim=c(-.1,.1)) lines(pred1.ts[,4],col="green") lines(pred2.ts[,4],col="red") lines(pred3.ts[,4],col="black") lines(pred4.ts[,4],col="yellow") e1_var4=returnsp500[(n.end+4):(t)]-pred1.ts[,4] #4-step ahead bivariate cay & sp500 e2_var4=returnsp500[(n.end+4):(t)]-pred2.ts[,4] #4-step ahead bivariate cay_indicator & sp500 e3_var4=returnsp500[(n.end+4):(t)]-pred3.ts[,4] #4-step ahead bivariate cay and cay_indicator & sp500 e4_var4=returnsp500[(n.end+4):(t)]-pred4.ts[,4] #4-step ahead univariate model just a lagged sp500 rmse1_var1=sqrt(mean(e1_var^2)) #16. RMSE's in order, 1-step, 2-step, 3-step, 4-step rmse2_var1=sqrt(mean(e2_var^2)) rmse3_var1=sqrt(mean(e3_var^2)) rmse4_var1=sqrt(mean(e4_var^2)) rmse1_var2=sqrt(mean(e1_var2^2)) rmse2_var2=sqrt(mean(e2_var2^2)) rmse3_var2=sqrt(mean(e3_var2^2)) rmse4_var2=sqrt(mean(e4_var2^2)) rmse1_var3=sqrt(mean(e1_var3^2)) rmse2_var3=sqrt(mean(e2_var3^2)) rmse3_var3=sqrt(mean(e3_var3^2)) rmse4_var3=sqrt(mean(e4_var3^2)) rmse1_var4=sqrt(mean(e1_var4^2)) rmse2_var4=sqrt(mean(e2_var4^2)) rmse3_var4=sqrt(mean(e3_var4^2)) rmse4_var4=sqrt(mean(e4_var4^2)) rmse1_var1 rmse2_var1 rmse3_var1 rmse4_var1 rmse1_var2 rmse2_var2 rmse3_var2 rmse4_var2 rmse1_var3 rmse2_var3 rmse3_var3 rmse4_var3 rmse1_var4 rmse2_var4 rmse3_var4 rmse4_var4 c=rep(1,116) cw=e4_var^2-e1_var^2+(e4_var-e1_var)^2 reg.cw=lm(cw~c-1) avar.cw=NeweyWest(reg.cw,lag=NULL,prewhite=FALSE) cw.test=reg.cw$coef/sqrt(avar.cw) cw.test pnorm(cw.test) (1-pnorm(cw.test))/2 c=rep(1,116) cw=e4_var2^2-e1_var2^2+(e4_var2-e1_var2)^2 reg.cw=lm(cw~c-1) avar.cw=NeweyWest(reg.cw,lag=NULL,prewhite=FALSE) cw.test=reg.cw$coef/sqrt(avar.cw) cw.test pnorm(cw.test) (1-pnorm(cw.test))/2 c=rep(1,116) cw=e4_var3^2-e1_var3^2+(e4_var3-e1_var3)^2 reg.cw=lm(cw~c-1) avar.cw=NeweyWest(reg.cw,lag=NULL,prewhite=FALSE) cw.test=reg.cw$coef/sqrt(avar.cw) cw.test pnorm(cw.test) (1-pnorm(cw.test))/2 c=rep(1,116) cw=e4_var4^2-e1_var4^2+(e4_var4-e1_var4)^2 reg.cw=lm(cw~c-1) avar.cw=NeweyWest(reg.cw,lag=NULL,prewhite=FALSE) cw.test=reg.cw$coef/sqrt(avar.cw) cw.test pnorm(cw.test) (1-pnorm(cw.test))/2 c=rep(1,116) cw=e4_var^2-e2_var^2+(e4_var-e2_var)^2 reg.cw=lm(cw~c-1) avar.cw=NeweyWest(reg.cw,lag=NULL,prewhite=FALSE) cw.test=reg.cw$coef/sqrt(avar.cw) cw.test pnorm(cw.test) (1-pnorm(cw.test))/2 c=rep(1,116) cw=e4_var2^2-e2_var2^2+(e4_var2-e2_var2)^2 reg.cw=lm(cw~c-1) avar.cw=NeweyWest(reg.cw,lag=NULL,prewhite=FALSE) cw.test=reg.cw$coef/sqrt(avar.cw) cw.test pnorm(cw.test) (1-pnorm(cw.test))/2 c=rep(1,116) cw=e4_var3^2-e2_var3^2+(e4_var3-e2_var3)^2 reg.cw=lm(cw~c-1) avar.cw=NeweyWest(reg.cw,lag=NULL,prewhite=FALSE) cw.test=reg.cw$coef/sqrt(avar.cw) cw.test pnorm(cw.test) (1-pnorm(cw.test))/2 c=rep(1,116) cw=e4_var4^2-e2_var4^2+(e4_var4-e2_var4)^2 reg.cw=lm(cw~c-1) avar.cw=NeweyWest(reg.cw,lag=NULL,prewhite=FALSE) cw.test=reg.cw$coef/sqrt(avar.cw) cw.test pnorm(cw.test) (1-pnorm(cw.test))/2 dmw=(e2_var^2-e1_var^2) c=rep(1,116) reg=lm(dmw~c-1) avar=NeweyWest(reg,lag=NULL,prewhite=FALSE) dmw.q=reg$coef/sqrt(avar) dmw.q pnorm(dmw.q) p.value=1-pnorm(dmw.q) pstr.value=p.value/2 pstr.value dmw=(e2_var2^2-e1_var2^2) c=rep(1,116) reg=lm(dmw~c-1) avar=NeweyWest(reg,lag=NULL,prewhite=FALSE) dmw.q=reg$coef/sqrt(avar) dmw.q pnorm(dmw.q) p.value=1-pnorm(dmw.q) pstr.value=p.value/2 pstr.value dmw=(e2_var3^2-e1_var3^2) c=rep(1,116) reg=lm(dmw~c-1) avar=NeweyWest(reg,lag=NULL,prewhite=FALSE) dmw.q=reg$coef/sqrt(avar) dmw.q pnorm(dmw.q) p.value=1-pnorm(dmw.q) pstr.value=p.value/2 pstr.value dmw=(e2_var4^2-e1_var4^2) c=rep(1,116) reg=lm(dmw~c-1) avar=NeweyWest(reg,lag=NULL,prewhite=FALSE) dmw.q=reg$coef/sqrt(avar) dmw.q pnorm(dmw.q) p.value=1-pnorm(dmw.q) pstr.value=p.value/2 pstr.value c=rep(1,116) cw=e1_var^2-e3_var^2+(e1_var-e3_var)^2 reg.cw=lm(cw~c-1) avar.cw=NeweyWest(reg.cw,lag=NULL,prewhite=FALSE) cw.test=reg.cw$coef/sqrt(avar.cw) cw.test pnorm(cw.test) (1-pnorm(cw.test))/2 c=rep(1,116) cw=e1_var2^2-e3_var2^2+(e1_var2-e3_var2)^2 reg.cw=lm(cw~c-1) avar.cw=NeweyWest(reg.cw,lag=NULL,prewhite=FALSE) cw.test=reg.cw$coef/sqrt(avar.cw) cw.test pnorm(cw.test) (1-pnorm(cw.test))/2 c=rep(1,116) cw=e1_var3^2-e3_var3^2+(e1_var3-e3_var3)^2 reg.cw=lm(cw~c-1) avar.cw=NeweyWest(reg.cw,lag=NULL,prewhite=FALSE) cw.test=reg.cw$coef/sqrt(avar.cw) cw.test pnorm(cw.test) (1-pnorm(cw.test))/2 c=rep(1,116) cw=e1_var4^2-e3_var4^2+(e1_var4-e3_var4)^2 reg.cw=lm(cw~c-1) avar.cw=NeweyWest(reg.cw,lag=NULL,prewhite=FALSE) cw.test=reg.cw$coef/sqrt(avar.cw) cw.test pnorm(cw.test) (1-pnorm(cw.test))/2 方法setPrice代替onBlur,以便在用户点击或标记字段时更新状态。

在我看来,这对于更长的表单更有效,因为您可以保证用户将选项卡或单击到下一个字段。