函数在两个不同元素上执行的方式不同

时间:2019-02-28 22:31:08

标签: javascript reactjs

不确定为什么会出错

  

无法读取未定义的属性“ val”

滑块更改不同于按钮onClick

App.js

constructor(props) {
 super(props);
 this.state = {
   val: 0,
 }
  this.handelChange = this.handelChange.bind(this)
}

handelChange() {
  let tmp = this.state.val
}

render() {
  return(
    <div>
      <Button onClick = {this.handelChange} />
      <CustomSlider onChange= {this.handelChange} />
    </div>  
  )
}

Slider.js

import React from "react";
import Tooltip from "rc-tooltip";
import Slider, { Range } from "rc-slider";

const Handle = Slider.Handle;

const handle = props => {
   const { value, dragging, index, ...restProps } = props;
   return (
      <Tooltip
         prefixCls="rc-slider-tooltip"
         overlay={value}
         visible={dragging}
         placement="top"
         key={index}
      >
         <Handle value={value} {...restProps} />
      </Tooltip>
   );
};

const Slider = props => {
   return (
      <div>
         <div style={{ width: 300, margin: 30 }}>
            <p>{this.props.title}</p>
            <Slider min={0} max={10} defaultValue={5} onChange={props.onChange} handle={handle}/>
         </div>
      </div>
   );
};

export default Slider;

handelChange的执行没有按钮单击错误。但是,滑块的onChange会产生错误Cannot read property ‘val’ of undefined。同一功能为何在两个不同的元素上执行不相同

1 个答案:

答案 0 :(得分:3)

您需要将Dim tblIdTitleHdr = CType(e.Row.Parent, Table) tblIdTitleHdr.Controls.AddAt(e.Row.RowIndex * 2 + 1, idTitleHdr) 绑定到handelChange或将this转换为箭头函数。

handelChange