在构造中定义变量,切记不要以var的形式定义,应该用this
constructor({width,min,max}){
super();
× var bigamount = Math.ceil(width/60);
√ this.bigamount = Math.ceil(width/60);
}
react中添加dom节点,以数组的形式添加,切记最后有return is;
showis(){
var is = [];
var length = this.bigamount * 5+1 ;
for(var i = 0 ; i < length; i++){
is.push(<i key={i}></i>);
}
return is;
}
i是行内元素,不能设置宽高,在这里i定义的是刻度,所以要写float: left;脱标。否则设置不出他的颜色和宽高。
i{
float: left;
width: 1px;
height: 18px;
background-color:orange;
}
为dom节点批量设置一些共有属性,就没必要写在less文件中。
可以在生命周期中定义。
形式要巧妙地用到ref属性,ref属性写在父元素中,通过find来绑定
$(this.refs.range).find(".scaleline i")
想要选择第几个模型的时候,用eq,但注意eq从0计数,想要选择第五个,不不能如下直接5n
×
$(this.refs.range).find('.scaleline i').eq(5n).css("height",25);
√
$(this.refs.range).find('.scaleline i:nth-child(5n+1)').css("height",25);
$(this.refs.span_container).append($("<span>111</span>"))
$(this).append("<u></u>");
追加到span_container的后面
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
注意:追加元素节点时,带有引号,否则追加不上去,但是push的时候不加引号。
showis(){
var is = [];
for(var i = 0 ; i < length ; i++){
is.push(<i key={i}></i>);
}
return is;
}
componentDidMount(){
let barleft = $(this.refs.range).find(".bar").offset().left;
let barright= $(this.refs.range).find(".bar").offset().left + $(this.refs.range).find(".bar").width();
console.log(barleft);
console.log(barright);
$(this.refs.range).find("b.right").draggable({
axis:"x",
//这里不能写this.barleft
//我也不知道为什么,先记下来,以后再对比
containment:[barleft,0,barright,0]
});
}
切记这样从函数中统一写dom然后返回给render,
切记函数里第一步要return
render(){
return(
<div className="filterbar">
<div className="row">
<div className="col-lg-1">学校</div>
<div className="col-lg-11">
{this.showshape()}
</div>
</div>
</div>
)
}
if(this.state.shape=="radio"){
return <div className="radio">
{<a href="#" className="mutibtn">多选+</a>}
</div>
}
中
if(this.state.shape=="radio"){
return .........
}
this.state={
"v" : [],
shape:"radio"
}
改变状态,item必须要加[ ] ,因为v是数组
改变状态,必须是setState({});
* chooseradio是onclick绑定的函数
chooseradio(item){
√ this.setState({"v":[item]});
× this.setState("v": item );
}
还有传入的item没有{ }
√ chooseradio( item ){}
× chooseradio( {item} ){}
点击事件的监听应该有()=>
(一般都是前两种。第三种有时不行)
√ onClick={()=>{this.gonext()}}
√ onClick={()=>{this.chooseradio(item)}}
√ onClick={(this.changeShape).bind(this)}
× onClick={()=>{this.gonext.bind(this)}}
× onClick={this.chooseradio(item)}
render(){
return (
// 这里直接显示不出来,会显示div里是个空数组
× <div>{this.props.nowfilter}</div>
// 必须要JSON.stringify,变为字符串输出
√ <div>{JSON.stringify(this.props.nowfilter)}</div>
);
}
}
export default connect((state)=>{
return {
"nowfilter" : state.investReducer.nowfilter
}
})(Invest);
从外链引用函数时一定要暴露,
createDateTable.js
function dealwith(year,month){
return{
reararr,
midarr,
nextarr
}
}
export default dealwith;
引用时
import dealwith from "./createDateTable.js";
就可以直接使用delwith函数了
根据函数选择td的样式,引用函数时一定要记得return
<td className={classname(index)} key={index} >{day}</td>
let classname=(index)=>{
if( index < reararr.length ){
return "gray";
}
}
componentDidMount(){
//一定要写在滚轮的外面,生命周期的里面
var self = this;
$(this.refs.head).mousewheel(function(event,delta){
//写滚轮事件不要忘了加这个,否则滑的时候页面来回动
event.preventDefault();
if( delta > 0 ){
// console.log("向上滑");
self.clickLeft();
}else{
// console.log("向下划");
self.clickRight();
}
})
}