javascript - React/material ui raisebutton 在 init 上执行 onTouchTap

Question

我正在使用react/redux/material ui，通常在我的网站上，组件工作正常。其中一页发生了一些非常非常奇怪的事情。

我创建了一个像这样的组件:

class MyOwnComponent extends Component {
  doSomething = (id) => {
    alert('doSomething: id = ' + id )
  }

  render() {
    return (
      <RaisedButton secondary={true} label={'My label'} onTouchTap={this.doSomething(id)}/>
    )
  }
}

我有一个来自 Material ui 的凸起按钮，并将其放入渲染方法中。

问题是，当页面加载其中的组件时，会调用 doSomething 方法。即使它只在raisedbutton的onTouchTap中被调用。几乎就像 raisebutton 中的错误是在单击按钮时立即调用 onTouchTap 方法。

有人对这种奇怪的行为有解释吗？

谢谢

Answer 1

您将给 onTouchTap void ，因为这就是 this.doSomething(id) 返回的内容。

this.doSomething(id) 

在第一次呈现 MyOwnComponent 时执行。

相反，你应该这样做:

class MyOwnComponent extends Component {
  doSomething = () => {
    const {id}  = this.props.object;
    alert('doSomething: id = ' + id )
  }

  render() {
    return (
      <RaisedButton secondary={true} label={'My label'} onTouchTap={this.doSomething}/>
    )
  }
}