将 this.function.bind(this) 替换为函数组件

Question

我有一个 class 组件，如下所示：

interface MyProps {
  addingCoord: any
  resetCoords: any
}

interface MyState {
  x: any
  y: any
}

class DrawerOld extends React.Component<MyProps, MyState> {
  width: number
  height: number

  constructor(props: MyProps) {
    super(props)
    this.state = {x: NaN, y: NaN, hoverMode: false}
    this.width = this.height = 400
  }

  onMouseMove(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
    this.setState(
      {
        x: parseFloat((e.nativeEvent.offsetX / this.width).toFixed(3)),
        y: parseFloat(
          ((this.height - e.nativeEvent.offsetY) / this.height).toFixed(3),
        ),
      },
      () => {
        if (this.state.hoverMode) this.addCoord()
      },
    )
  }

  toggleHoverMode() {
    this.setState({hoverMode: !this.state.hoverMode})
  }

  addingCoord() {
    const coord = {x: this.state.x, y: this.state.y}
    this.props.addingCoord(coord)
  }

  render() {
    return (
      <div>
        <div>
          <div
            onMouseMove={(e) => this.onMouseMove(e)}
            onClick={this.addCoording.bind(this)}
          />
        </div>
      </div>
    )
  }
}

export default DrawerOld

我想修改成功能组件。但是，我无法弄清楚如何准确修改这部分： onClick={this.addCoord.bind(this)}

因为目前如果我使用 onClick={props.addCoord()}，我会在使用它时遇到如下错误：

TypeError: 无法读取未定义的属性 'x'

<DrawerNew addCoord={this.addCoord.bind(this)}
                            resetCoords={this.resetCoords.bind(this)} />

Answer 1

改变你的onClick

由此

onClick={props.addCoord()}

至此

onClick={addCoord}

将 this.function.bind(this) 替换为函数组件

replace this.function.bind(this) for function component

javascript

typescript

reactjs

react-native

react-functional-component