javascript - 单击确认模式后，事件数据未定义

Question

我有一个来自semantic-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}))
    }

};

然后，这将根据格式化的配置从 data.value 获取 configId，并且工作正常...

但是，当我添加确认对话框/模式时，当用户选择一个选项时，他们必须确认是或否，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:

传递的数据是确认对话框代码中的数据。有人可以帮我解决这个问题吗，因为我需要将 configId 作为数据传递？

希望这是有道理的!

Answer 1

您无法从handleConfirm获取configId(data.value)，因为handleConfirm是一个回调函数，当您单击<Confirm/>上的“yes”按钮时会触发该函数。 ，它不知道您刚刚选择了哪个选项。您可以获得该信息的唯一地方是 <Dropdown/> 上的 onChange 回调。 .

为了解决您的问题，我们需要从 Dropdown 传递 configId(data.value)的 onChange 回调到 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 })
}