Question

我的面板如下：

  render () {
    const testID = this.props.testID
    console.log(testID) // has value here
    return (
      <ExpansionPanel onChange={(testID) => console.log(testID)}>
        <ExpansionPanelSummary>
          <Typography>SOME TITLE</Typography>
        </ExpansionPanelSummary>
        <ExpansionPanelDetails}>
          SOME DETAILS
        </ExpansionPanelDetails>
      </ExpansionPanel>
    )
  }

我想在用户单击以扩展面板时得到此testID。

原因是稍后我可以使用此testID从服务器获取数据并在< ExpansionPanelDetails >下显示数据。

但是目前打印的内容如下：

Class {dispatchConfig: {…}, _targetInst: FiberNode, _dispatchListeners: ƒ, _dispatchInstances: FiberNode, nativeEvent: MouseEvent, …}

有什么想法吗？

谢谢！

Answer 1

您在这里所做的就是将React Synthetic事件参数命名为testId。它没有变量的值，因为具有相同名称的参数将在该箭头函数中覆盖它。

如果您仍想使用箭头功能，则可以重命名或不使用第一个参数（事件），并使用外部作用域中的testId变量。

() => { console.log(this.props.testId); }

或者，您可以在类中添加一个函数：

handleExpansionPanelChange = (ev) => {
    const testID = this.props.testID;
    console.log(testID);
}

然后在渲染功能中，将this.handleExpansionPanelChange传递到ExpansionPanel的onChange道具。

或者您可以将传递给ExpansionPanel的onChange属性的方法绑定为预先设置testId值：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

材质ui <expansionpanel> onChange传递变量

1 个答案: