переменная материала <ExpansionPanel>onChange pass переменная - PullRequest
Новая
       6

переменная материала <ExpansionPanel>onChange pass переменная

0 голосов
/ 20 декабря 2018

У меня панель выглядит следующим образом: 

  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, …}

Есть идеи?

Спасибо!

1 Ответ

0 голосов
/ 20 декабря 2018

То, что вы здесь делаете, - это именование аргумента события 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

...