Question

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

我创建了一个这样的组件：

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

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

我有一个来自材料ui的凸起按钮并将它放在渲染方法中。

当页面加载其中的组件时，会调用doSomething方法。即使它仅在凸起按钮中的onTouchTap中调用。几乎就像在凸起按钮中的一个错误是在单击按钮时立即调用onTouchTap方法。

是否有任何机构对这种奇怪的行为有解释？

由于

Answer 1

你给onTouchTap带来了空虚，因为这就是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}/>
    )
  }
}

Answer 2

问题是doSomething（）函数的返回值被返回并分配给onTouchTap。相反，你应该只传递函数名称，而不是paranthesis。

一种解决方案就是这样。

class MyOwnComponent extends Component {
  doSomething = () => {
   alert('doSomething: id = ' + this.props.object.id );
  }
  render() {
   return (
     <RaisedButton secondary={true} label={'My label'} onTouchTap=
      {this.doSomething}/>
   );
  }

}

或者您也可以使用

<RaisedButton secondary={true} label={'My label'} onTouchTap={()=> 
   this.doSomeThing(id) /> // eslint-disable-line

Answer 3

我尝试了你的溶剂。但是，当我使用onTouchTap = {（）=＆gt; this.doSomething（id）}页面不会加载，因为浏览器说JSX道具不应该使用箭头功能。

id来自道具。在渲染方法的顶部我说

const { id } = this.props.object

React / material ui raisebutton在init上执行onTouchTap

3 个答案: