Данные о событиях не определены после нажатия модального подтверждения - PullRequest
Новая
       9

Данные о событиях не определены после нажатия модального подтверждения

0 голосов
/ 28 января 2020

У меня выпадающий список из пакета semanti c -ui, который отлично работает, когда я не включаю модальный код подтверждения в свой проект. Вот что у меня сейчас: 

<Dropdown
      loading={settingConfig}
      disabled={!configEditable}
      options={configs && configs.length > 0 ? configs.map(formatConfig) : teltonikaConfigs.map(formatTeltonikaConfig)}
      onChange={this.handleConfigChange} />
      <EditButton editingEnabled={configEditable} onClick={this.toggleConfigEdit} />

Параметры форматируются следующим образом: 

const formatConfig = conf => ( { key: conf.id, text: conf.name + '-' + conf.scriptVersionId + '.' + conf.configVersionId, value: conf.id, image: getRisk(conf.risk)} );

const formatTeltonikaConfig = conf => ({key: conf.id, text: conf.name, value: conf.id});

Когда выбран параметр, вызывается следующая функция: 

handleConfigChange = ( e, data ) => {
    const forceUpdate = true;
    // Not an Atom B Device
    if (this.props.device.type !== "HARDWIRED-BM") {
        const configId = data.value;
        this.setState( { settingConfig: true, configEditable: false } );
        updateConfiguration(this.props.device.imei, configId, forceUpdate)
            .then( this.props.handleDeviceUpdate )
            .catch( error => toast.error( "There has been an error whilst updating the device.. This will need to be updated manually. " + error.message ) )
            .then(() => this.setState( { settingConfig: false } ) )
    } else {
        const configId = data.value;
        console.log(" Id " + configId);
        this.setState( { settingConfig: true, configEditable: false } );
        updateTeltonikaDeviceConfig(this.props.device.imei, configId, forceUpdate)
            .then(this.props.handleDeviceUpdate)
            .catch(error => toast.error("There has been an error whilst updating the device.. This will need to be updated manually. " + error.message))
            .then(() => this.setState({settingConfig: false}))
    }

};

Это тогда получит configId от data.value в соответствии с отформатированными конфигами и работает нормально ...

Однако, когда я добавляю диалог подтверждения / модальный, так, когда пользователь выбирает опцию, они должны подтвердить, да или нет, configId/data.value не определено. Код для этого выглядит следующим образом:

Изменяется выпадающий список (изменяется метод onChange): 

<Dropdown
   loading={settingConfig}
   disabled={!configEditable}
   options={configs && configs.length > 0 ? configs.map(formatConfig) : teltonikaConfigs.map(formatTeltonikaConfig)}
   onChange={this.show} />
   <EditButton editingEnabled={configEditable} onClick={this.toggleConfigEdit} />

У меня также есть этот код, чтобы показать раскрывающийся список: 

    show = () => this.setState({ open: true })

handleConfirm = (e, data) => {
    this.handleConfigChange(e, data);
    this.setState({ open: false })
}

handleCancel = () => this.setState({ open: false })

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

 <div>
   <Confirm
   open={this.state.open}
   cancelButton='No'
   confirmButton="Yes"
   onCancel={this.handleCancel}
   onConfirm={this.handleConfirm}
 />
 </div>

Таким образом, при выборе опции открывается диалоговое окно, и когда пользователь нажимает YES e,data отправляется в handleConfirmMethod .. Теперь моя проблема в том, что данные содержат следующие значения, а не configId, который передается без диалогового окна подтверждения:

enter image description here

Данные, передаваемые через, соответствуют тому, что содержится в коде диалогового окна подтверждения. Кто-нибудь может мне помочь с этим, так как мне нужно пройти через configId как данные?

Надеюсь, это имеет смысл!

1 Ответ

1 голос
/ 28 января 2020

Вы не можете получить configId (data.value) из handleConfirm, потому что handleConfirm - это функция обратного вызова, которая запускается, когда вы нажимаете кнопку «да» на <Confirm/>, она не знает, какую опцию вы только что выбрали. Единственное место, где вы можете получить эту информацию - это обратный вызов onChange для этого <Dropdown/>.

. Чтобы решить вашу проблему, нам нужно передать configId (data.value) из обратного вызова onChange Dropdown в Confirm обратный вызов onConfirm. Есть несколько решений. Я лично предложил бы сохранить configId (data.value) в такое состояние: 

<Dropdown
  ...
  onChange={this.show} /* better to rename it to something else cuz it's not just "show" any more */
/>

// save the configId(data.value) to state
show = (event, data) => this.setState({ open: true, selectedConfigId: data.value }); 

// get the value from state. You can also get "this.state.selectedConfigId" in this.handleConfigChange directly
handleConfirm = (e, data) => {
    this.handleConfigChange(e, this.state.selectedConfigId);
    this.setState({ open: false })
}
...