时间戳

首页 > 解决方案 > SweetAlert : 需要增加文本区域的大小

reactjs - SweetAlert : 需要增加文本区域的大小

问题描述

我无法增加text-area甜蜜警报的pops-up，我想根据我的规范重置它，我能够增加模态的高度和宽度，而不是text-area. 需要输入

在 CSS 中尝试.swal-height并给出了适当的. 但无法设置大小。.swal-widthclassnametext-area

handleDelete() {

var delreq;
var response_data;
var response_jsonObj;


swal("Enter notes:", {
  content: "input",
}).then((value) => {
  isDeleted = "Yes";
delreq = {
  "DeleteRequest":
    [
      {
        "Param-1": val1,
        "Param-2": val2,
        "Param-3": "val3",
        "Param-4": val4,
        "Param-5": val5
      }
    ]
};
console.log('delreq',delreq);
fetch('API_URL', {
  headers: {
    'Accept': 'application/json, text/plain, application/xml,  */*',
    'Content-Type': 'application/json',
    'Access-Control-Allow-Headers': 'Content-Type',
  },
  method: 'POST',
  body: JSON.stringify(delreq)
}
).then(response => {
  if (response.status !== 200) {

    return;
  }
  response.text().then(data => {

    response_data = data;
    response_jsonObj = JSON.parse(response_data);
    this.setState({ delval: response_jsonObj });

  });
}).catch(error => this.setState({ error }));

swal({
  title: "Deleted Successfully!",
  icon: "success",
  confirmButtonText: 'OK'
}).then((okay) => {
  if (okay) {
    history.push('/page1');
    history.push('/page2');
  }
});
});

}

希望text-area比现在出现的更大。

标签： reactjstwitter-bootstrapsweetalert

解决方案

这已经解决了。我使用了 SweetAlert 的最新版本，即 Sweetalert2，它让我的工作变得更轻松。我使用 SweetAlert2 官方网站 ( https://sweetalert2.github.io/ ) 的代码片段来完成任务。这里是 ：

Swal.fire({
  title: 'Submit your Github username',
  input: 'text',
  inputAttributes: {
    autocapitalize: 'off'
  },
  showCancelButton: true,
  confirmButtonText: 'Look up',
  showLoaderOnConfirm: true,
  preConfirm: (login) => {
    return fetch(`//api.github.com/users/${login}`)
      .then(response => {
        if (!response.ok) {
          throw new Error(response.statusText)
        }
        return response.json()
      })
      .catch(error => {
        Swal.showValidationMessage(
          `Request failed: ${error}`
        )
      })
  },
  allowOutsideClick: () => !Swal.isLoading()
}).then((result) => {
  if (result.value) {
    Swal.fire({
      title: `${result.value.login}'s avatar`,
      imageUrl: result.value.avatar_url
    })
  }
})

推荐阅读