Блог

У меня проблема с областью действия, как я могу получить доступ к функции ShowModal в моем заголовке? В этом заголовке у меня есть столбец с именем lastWinners, который отображает кнопку, и в этой кнопке я хочу показывать модальное значение при нажатии, но я получаю сообщение TypeError: не удается прочитать свойство ‘ShowModal’ неопределенного значения.

 export class EventsList extends React.Component {
  constructor(props) {
    super(props)
  }

  state = { visible: false };

  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  render() {
    const { schema, loadEvents, match } = this.props
    return (
      <Card title='Eventos' bordered={false}>
        <DataTable
          dataLoader={loadEvents}
          header={header}
            
        />
        <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        ></Modal>
      </Card>
    )
  }
}

const header = {
  id: { title: 'ID' },
  winnersQuantity: { title: 'Quantidade de vencedores' },
  lastWinners: {
    title: 'Ganhadores',
    render: () => (
      <Button
        onClick={this.showModal} <--------- typeError: Cannot read property 'showModal' of undefined
      >
        <Icon type='trophy' />
      </Button>
    ),
  },
}
  

Вам нужно будет либо привязать метод к классу, либо использовать функцию со стрелкой при передаче ее в качестве реквизита, чтобы this правильно определить.

Привязать функцию

   constructor(props) {
    super(props)
    this.showModal = this.showModal.bind(this);
  }
  

или передать ее внутри функции со стрелкой

       <Button onClick={() => this.showModal()}>
        <Icon type='trophy' />
      </Button>