Question

我正在尝试在react弹出组件的按钮内创建一个refs。我想要实现的是当弹出窗口进入屏幕时我需要进行任何一个按钮焦点，然后用户不想触摸他想要按下回车键的屏幕，然后聚焦按钮将触发。我试过了，这对我没用。我不知道我错过了什么我也是反应灵的新蜜蜂。在react-popup组件中，任何人都可以帮助我吗？

我已将反应弹出作为可重复使用的函数，如下面的代码

export const createPopup = (msg, type, title, swapColor) => {

  msg = msg === undefined || msg === null ? '' : msg
  title = title === undefined || title === null ? '' : title
  type = type === undefined || type === null ? '' : type
  swapColor = swapColor === undefined || swapColor === null ? false : swapColor


  return new Promise(function (resolve, reject) {

    Popup.close();
    Popup.create({
      title: type,
      content: msg,
      className: type,
      closeOnOutsideClick: false,
      buttons: {
        left: [{
          text: type === popupType.CONFIRM ? 'YES' : 'OK',
          className: swapColor === true ? 'cancel' : 'ok',
          key: swapColor === true ? '' : 'enter',
            // is it possible or not if yes please tell how to access 
         ** ref : 'leftRef' **,
          action: function () {
            Popup.close();
            resolve(true);
          }
        }],
        right: [type === popupType.CONFIRM ? {
          text: 'NO',
          key: swapColor === true ? 'enter' : '',
          className: swapColor === true ? 'ok' : 'cancel',
         **ref : 'rightRef'**,
          action: function () {
            Popup.close();
            reject(false);
          }
        } : '']
      }
    })

  })

在我访问的方式下面的组件中

 this.leftRef.focus(); or  this.rightRef.focus();

如上所述，代码ref =＆＃39; leftRef＆＃39;可能与否我不知道是否如何在另一个导入的组件中拨打 ref 。或者有更好的工作请告诉我。在此先感谢!!。

Answer 1

如果您使用的是react-popup我从api中假设您的代码使用则无法。 This is how react-popup renders these buttons：

const btnComponent = (
    <ActionButton
        className={className}
        key={key}
        url={url}
        onClick={() => this.buttonClick(btn.action)}
    >
        {btn.text}
    </ActionButton>
);

正如您所看到的，没有传递给它的引用回调。

此库仅适用于您不需要修改弹出窗口的外观或行为的情况。它只有一些道具来修改它，并没有提供覆盖任何东西的方法。这就是为什么我不喜欢那个库的设计，因为它反对构建易于组合的组件的反应原理。

编辑：

一种让它工作的方法是给你想要聚焦一个唯一类名的按钮：

Popup.create({
    // ...
    buttons: {
        left: ['NO'],
        right: [{
            text: 'YES',
            className: 'btn-yes', // your unique class name here
            // ...
        }]
    }
});

然后你可以获得DOM元素并将其集中在这样：

const btn = document.getElementsByClassName('btn-yes')[0];
btn.focus();

Reactjs弹出组件我们可以在按钮中创建一个refs吗？

1 个答案: