RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / user-342016

Cat_In_Ears's questions

Martin Hope
Cat_In_Ears
Asked: 2020-03-27 20:36:09 +0000 UTC

在应用程序启动时反应奇怪的控制台输出

  • 2
[HMR] Waiting for update signal from WDS... 

这是应用程序输出到控制台的内容,引用文件/log.js:24(位于node_modules/webpack)

我试图注释掉这一行和整个文件,但无济于事。我一创建新应用程序就出现了问题(create-react-app)以前没有发生过

反应版本 6.13.4

reactjs
  • 1 个回答
  • 10 Views
Martin Hope
Cat_In_Ears
Asked: 2020-12-19 14:46:48 +0000 UTC

反应错误边界(熔断器)。奇怪的行为

  • 0

我想编写一个不允许任何错误破坏整个应用程序的React.js 守卫。在阅读官方文档时,我在codepen中看到了这个例子的链接:https ://codepen.io/gaearon/pen/wqvxGa?editors=0010

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null, errorInfo: null };
  }

  componentDidCatch(error, errorInfo) {
    // Catch errors in any components below and re-render with error message
    this.setState({
      error: error,
      errorInfo: errorInfo
    })
    // You can also log error messages to an error reporting service here
  }

  render() {
    if (this.state.errorInfo) {
      // Error path
      return (
        <div>
          <h2>Something went wrong.</h2>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}
            <br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }
    // Normally, just render children
    return this.props.children;
  }  
}

class BuggyCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(({counter}) => ({
      counter: counter + 1
    }));
  }

  render() {
    if (this.state.counter === 5) {
      // Simulate a JS error
      throw new Error('I crashed!');
    }
    return <h1 onClick={this.handleClick}>{this.state.counter}</h1>;
  }
}

function App() {
  return (
    <div>
      <p>
        <b>
          This is an example of error boundaries in React 16.
          <br /><br />
          Click on the numbers to increase the counters.
          <br />
          The counter is programmed to throw when it reaches 5. This simulates a JavaScript error in a component.
        </b>
      </p>
      <hr />
      <ErrorBoundary>
        <p>These two counters are inside the same error boundary. If one crashes, the error boundary will replace both of them.</p>
        <BuggyCounter />
        <BuggyCounter />
      </ErrorBoundary>
      <hr />
      <p>These two counters are each inside of their own error boundary. So if one crashes, the other is not affected.</p>
      <ErrorBoundary><BuggyCounter /></ErrorBoundary>
      <ErrorBoundary><BuggyCounter /></ErrorBoundary>
    </div>
  );
}



ReactDOM.render(
  <App />,
  document.getElementById('root')
);

这段代码在 codepen 中工作,我知道render 中存在错误,它应该存在,在 throw 被“调用”的那一刻,错误被成功捕获并且不会丢弃整个应用程序(如预期的那样)。 但是当我复制这段代码时,它不像在沙箱中那样工作,即在熔断器需要捕获错误的那一刻,它并没有美化,而是“放置”整个应用程序, 问题:熔断器为什么工作正如它应该在代码笔中一样,但是当我把它放在我的文件中时,一切都会中断。我的电脑可能是什么问题

这是我控制台中的错误

照片 这是屏幕上的错误照片: 屏幕上的照片错误


我PC上的react版本是16.12.0,react-dom的版本是一样的。


PS:代码 1 合 1 就像在沙盒中一样

javascript
  • 1 个回答
  • 10 Views
Martin Hope
Cat_In_Ears
Asked: 2020-10-13 12:58:47 +0000 UTC

在 JavaScript 中的 textarea 中保存换行符

  • 1

有textarea一个类modal-description,我使用jquery let description = $('.modal-description').val()获取它的值但是当我获取值时,不保存换行符。我怎么解决这个问题?提前致谢!

javascript
  • 2 个回答
  • 10 Views
Martin Hope
Cat_In_Ears
Asked: 2020-09-20 12:20:53 +0000 UTC

jquery .hide() 方法不起作用

  • 0

class 有一个元素label,默认情况下通过cssdisplay: none隐藏,之后在一定条件下显示,但是当我再次尝试通过它隐藏时,它不再隐藏。此外,如果您不是通过css而是通过js隐藏它(即在脚本的最开始处 write ,那么一切正常并且元素被隐藏)$('.label').hide();$('.label').hide();

这是它的样子html:

<div class="image-add">
   <div class="image-file__added-global clear"></div>

   <label class="label">
       <i class="fas fa-plus-circle"></i>
       <input type="file" class="file-input">
   </label>
</div>

在这个 div 中,我抛出带有input类的图片image-file__added,当它们的数量超过 6 张时input,我将其隐藏以删除添加照片的能力

这里JS:

if(  $('.image-file__added').length == 5  ) {

       console.log('in if');
       $('.label').hide();

}

也就是说console.log();,它可以工作,但是元素没有隐藏,这是什么问题?


PS:代码相当广泛,所有的细微之处都无法澄清

$(document).ready(function() {

  function typeFileCheck(src) {
    let type = src.substr(5, 5);
    if (type == 'image') {
      return true
    }
    return false
  }

  function imageGallery(input) {
    let reader = new FileReader();

    if ($('.image-file__added').length != 6) {

      reader.onload = function(e) {
        let src = e.target.result;
        let imageCheck = typeFileCheck(src);
        if (imageCheck) {
          if ($('.image-file__added-global').hasClass('clear')) {

            $('.image-file__added-global').removeClass('clear');

            // добавление глобал версии
            $('.image-added-message__error').hide();
            let newimage = `<img src="${src}"></img>`
            $('.image-file__added-global').append(newimage);
            $('.form-group').hide();

            //добавление мини версии
            newImage = `<img src="${src}" class="image-file__added gallery-active"></img>`;

            // прячем большую версию кнопки т отображаем мини
            $('.image-add .label').before(newImage);
            $('.image-add .label').show();
          } else {

            $('.image-added-message__error').hide();
            let newImage = `<img src="${src}" class="image-file__added"></img>`
            $('.image-add .label').before(newImage);
            // прячем большую версию кнопки т отображаем мини
            $('.form-group').hide();
            $('.image-add .label').show();

          }
        } else {
          $('.image-added-message__error').show();
        }
      }

      reader.readAsDataURL(input.files[0]);



      if ($('.image-file__added').length == 5) {
        console.log('in if');
        $('.label').hide();
      }

    } else {
      $('.image-added-message__error-full').show();
      setTimeout(() => {
        $('.image-added-message__error-full').fadeOut(700)
      }, 6000);
    }
  }


  $(document).on('click', '.image-file__added', function() {
    let $src = $(this).attr('src');
    $('.image-file__added-global img').attr('src', $src);
    $('.gallery-active').removeClass('gallery-active');
    $(this).addClass('gallery-active');
  }); // end click


  let $modal = $('.modal > .modal-body, .modal > .add-modal-bg');

  $('.add-button').click(function() {
    $modal.show();

    $('body').css({
      overflow: 'hidden'
    }); // end css

  }); // end click

  $('.modal-close').click(function() {
    $modal.hide();

    $('body').css({
      overflow: 'auto'
    }); // end css

  }); // end click

  $('.add-modal-bg').click(function() {
    $modal.hide();
  }); // end click

  $('.modal-name, .modal-description').on('input', function() {
    var $this = $(this);
    if ($this.val() == '') {
      $this.removeClass('modal-name_filled');
    } else {
      $this.addClass('modal-name_filled');
    }
  }); // end on

  $('.file-input').change(function(event) {

    try {
      imageGallery(this);
    } catch {

    }
  }); // end change



}); // end ready
:root {
  box-sizing: border-box;
}

*,
::after,
::before {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  height: 200vh;
}

.head {
  padding-top: 1em;
  padding-bottom: 1.5em;
  margin: 0;
  background-color: #00021F;
  position: relative;
}

.head-title {
  margin: 0;
  color: white;
  text-align: center;
}

.head-title>span {
  margin: 0;
  color: yellow;
}

.fa-shopping-basket::before {
  font-size: 2.2em;
  color: white;
  transition: .2s;
}

.basket {
  position: absolute;
  top: 1em;
  right: 1em;
}

.basket:hover .fa-shopping-basket::before {
  color: grey;
  transition: .2s;
}

.basket-count {
  display: none;
  background-color: #DE781F;
  color: white;
  border-radius: 50%;
  padding: .1em .4em;
  font-size: 1.3em;
  position: absolute;
  top: -.5em;
  left: -1em;
}

.search {
  text-align: center;
  margin-top: 1em;
  position: relative;
}

.search>input {
  width: 75%;
  height: 2.5em;
  border: none;
  outline: none;
  color: #00021F;
  border-radius: .2em;
  padding: 0 .5em;
  position: relative;
  margin-right: -.2em;
}

.fa-search::before {
  display: none;
  background-color: white;
  font-size: 1.1em;
  padding: 5px;
  border-radius: .3em;
  position: absolute;
  bottom: 0;
}


/* placeholder style */

::-webkit-input-placeholder {
  color: #00021F;
}

::-moz-placeholder {
  color: #00021F;
}


/* Firefox 19+ */

:-moz-placeholder {
  color: #00021F;
}


/* Firefox 18- */

:-ms-input-placeholder {
  color: #00021F;
}

:focus::-webkit-input-placeholder {
  color: transparent
}

:focus::-moz-placeholder {
  color: transparent
}

:focus:-moz-placeholder {
  color: transparent
}

:focus:-ms-input-placeholder {
  color: transparent
}

.add-section {
  position: relative;
}

.modal {
  display: block;
}

.modal-body {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: white;
  z-index: 2;
  overflow: auto;
  padding: .5em 1.5em;
}

.add-modal-bg {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.add-button {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 1.4em;
  font-weight: bold;
  border: none;
  outline: none;
  text-transform: uppercase;
  background-color: #1F85DE;
  color: white;
  font-size: 0.875em;
}

.add-button:hover {
  background-color: #1D7CCE;
}

.modal-close {
  padding: 0;
  font-size: 2.5em;
  outline: none;
  border: none;
  position: absolute;
  right: .5em;
  top: .3em;
  background-color: transparent;
}

.modal-cool-input {
  box-sizing: border-box;
  border-bottom: 2px solid #ccc;
  width: 100%;
  position: relative;
  margin-top: 1em;
  font-size: 16px;
}

textarea {
  border-top: 10px solid black;
  resize: none;
  font-family: Arial, sans-serif;
  min-width: 100%;
}

.modal-name {
  box-sizing: border-box;
  border: none;
  background: none;
  border: none;
  width: 100%;
  padding: 1.2em 1em 0.8em;
  position: relative;
  z-index: 2;
  font-size: 1em;
}

.modal-name:focus {
  outline: none;
}

.modal-cool-input__placeholder {
  box-sizing: border-box;
  border: none;
  background: none;
  width: 100%;
  position: absolute;
  z-index: 1;
  padding-left: 1em;
  left: 0;
  top: 50%;
  line-height: 1em;
  margin-top: 0;
  color: #777;
  transition: all 0.2s ease;
}

.modal-name_filled+.modal-cool-input__placeholder,
.modal-name:focus+.modal-cool-input__placeholder,
.modal-description_filled+.modal-cool-input__placeholder,
.modal-description:focus+.modal-cool-input__placeholder {
  font-size: 0.8em;
  top: 0;
  z-index: 2;
}

.modal-description {
  width: 80%;
  height: 7.5em;
  overflow: auto;
  border: none;
  z-index: 2;
  position: relative;
  background-color: transparent;
  border-top: 15px solid white;
  outline: none;
}

.image-file__added {
  width: 90px;
}

.form-group {
  padding: 1em;
  margin: 1em;
}

input[type=file] {
  outline: 0;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

.label {
  width: 120px;
  border: 2px dashed grey;
  border-radius: 5px;
  display: block;
  padding: 1.2em;
  transition: border 300ms ease;
  cursor: pointer;
  text-align: center;
  margin: 0;
}

.label i {
  display: block;
  font-size: 42px;
  padding-bottom: 16px;
}

.label i,
.label .file-title {
  color: grey;
  font-weight: bold;
  transition: 200ms color;
}

.label:hover {
  border: 2px solid #000;
}

.label:hover i,
.label:hover .file-title {
  color: #000;
}

.form-group {
  display: flex;
  justify-content: center;
}

.file-title .file-title-descr {
  font-size: .6em;
}

.image-added-message__error,
.image-added-message__error-full {
  color: red;
  display: none;
  font-size: 1.5em;
  font-weight: bold;
}

.image-file__added {
  width: 30%;
  max-width: 10em;
  min-width: 4em;
  height: 6em;
  margin: .2em;
}

.image-add {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.image-file__added-global {
  width: 100%;
  max-height: 18em;
  display: flex;
  justify-content: center;
}

.image-file__added-global img {
  width: 20em;
}

.image-add .label {
  display: none;
  max-width: 6.3em;
  max-height: 6.3em;
  margin: .1em;
}

.label .fas {
  padding: .2em;
}

.gallery-active {
  border: 4px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="head">
  <h1 class="head-title"><span>Lieti</span>Shops</h1>

  <div class="basket">
    <span class="basket-count"></span>
    <i class="fas fa-shopping-basket"></i>
  </div>

  <div class="search">
    <input type="text" name="search-input" placeholder="Поиск по товарам">
    <i class="fas fa-search"></i>
  </div>
</header>

<main>
  <section class="add-section">
    <button type="button" name="add-button" class="add-button">+ Добавить товар</button>
    <div class="modal">
      <div class="modal-body">
        <button type="button" name="close-button" class="modal-close">&times;</button>
        <h2 class="modal-title">Добавить товар</h2>

        <div class="image-add">
          <div class="image-file__added-global clear"></div>
          <label class="label">
                            <i class="fas fa-plus-circle"></i>
                            <input type="file" class="file-input">
                        </label>
        </div>

        <div class="form-group">
          <label class="label">
                            <i class="far fa-file-image"></i>
                            <span class="file-title">Добавте фото</span>
                            <input type="file" class="file-input">
                        </label>
        </div>

        <div class="error-image-message-pack">
          <span class="image-added-message__error">Не удалось загрузить изображение</span>
          <span class="image-added-message__error-full">Можно загрузить только 6 изображений :(</span>
        </div>

        <div class="modal-cool-input">
          <input type="text" class="modal-name" placeholder="">
          <span class="modal-cool-input__placeholder">Название</span>
        </div>

        <div class="modal-cool-input">
          <textarea name="description" class="modal-description" placeholder=""></textarea>
          <span class="modal-cool-input__placeholder modal-cool__placeholder-bgc">Описание</span>
        </div>

      </div>
      <div class="add-modal-bg"></div>
    </div>
  </section>
</main>

Сайт на данный момент на мобильные устройства так, что открывайте в узком окне, если не хотите кровь из глаз :) Так же там не подгружены иконки, но суть понятна

javascript
  • 2 个回答
  • 10 Views
Martin Hope
Cat_In_Ears
Asked: 2020-07-12 14:33:07 +0000 UTC

如何在 github 上恢复已删除的存储库

  • 5

我删除了我在github上的仓库,然后也删除了本地文件(不要问为什么,怎么回事),现在需要恢复github上的远程仓库,可以吗?

github
  • 1 个回答
  • 10 Views
Martin Hope
Cat_In_Ears
Asked: 2020-07-08 23:38:51 +0000 UTC

jquery ui 选择菜单远程激活

  • 1

由于 有一个风格化的元素selectmenu,在页面的另一个位置也有一个按钮(但在相对于 的屏幕可见性中selectmenu,如果这很重要的话)所以,当你点击这个按钮时,selectmenu. 如何实施?


PS:在网上找了很久的答案,以为JQuery中有一个类似.click()的函数,可以激活一个元素的点击回调,但是没找到(
PSS:一般来说,如果JQuery UI中没有这个功能,那么请告诉我如何实现我的想法,谢谢!

jquery
  • 2 个回答
  • 10 Views
Martin Hope
Cat_In_Ears
Asked: 2020-07-08 15:35:06 +0000 UTC

如何限制 .selectmenu jQuery UI 上的列表长度

  • 0

select由于带有类mealthrough的标签样式,有一个下拉菜单.selectmenu,列表中有很多元素,当打开时,它们都“掉出”在外面。如何限制下拉列表的长度,例如限制为6个值,并在侧面出现滚动线?

jquery
  • 1 个回答
  • 10 Views
Martin Hope
Cat_In_Ears
Asked: 2020-07-08 14:00:25 +0000 UTC

无法在 jQuery UI 中缩进 .select()

  • 0

select我在 html 中添加了一个带有该类的标签meal,之后我使用 JQuery UI 库设置了它的样式meal,.selectmenu()现在我需要将此标签meal向右移动 n 个像素,但是使用margin/padding它不会移动,它一直被按下左边缘。我怀疑问题出在 jQuery UI 的“根”样式中,但我自己无法解决这个问题。
在照片中,这种情况在页面上的显示方式。 红色箭头是<code>meal</code>本身,红框是它应该在的地方。

在照片中,这种情况在页面上的显示方式。红色箭头是它本身 meal,红色矩形是它应该在的地方。
我会很感激你的帮助。您可以在此处查看项目和代码


UPD:评论中的正确答案由meine给出:radioContainer - margin-right: npx

css
  • 2 个回答
  • 10 Views
Martin Hope
Cat_In_Ears
Asked: 2020-07-02 17:23:03 +0000 UTC

除以零时的错误

  • 2

我从远方开始。我写了一个计算器,直到某一点,除以时,我0输出Error(应该),但由于某种原因后来它停止工作,当除以时0,一切都冻结了,据我所知,有一个硬内存泄漏。这是负责数学部分的代码:

$('.result').click(function(){
    console.log('In')
    if(inputLength != 0){

        try {
           let result = eval($('.input-field').text());
           $('.input-field').html('').append(+result.toFixed(10));
           inputLength = countDigits(result);
        }catch(e) {
            $('.input-field').html('Error');
            inputLength = 5;
        } // end catch
    }
}); // end click

原理是这样的。有一个字段input-field,当单击键时,会添加字符(例如5+2,等)。当您单击键result时,它js会读取字段的值input-field并执行代码,这要归功于eval(是,是eval is evil,但仍然:D)还有一个,try{}catch{}当您输入时会5+显示错误。问题本身:为什么除以零时会发生某种游戏?


PS:这是计算器本身

javascript
  • 1 个回答
  • 10 Views
Martin Hope
Cat_In_Ears
Asked: 2020-06-21 19:15:18 +0000 UTC

原子文本编辑器的问题

  • 0

当我打开文件并关闭 atom 时,打开所有打开的文件后都将关闭,并改为 unitled。在重新安装 Windows 之前,打开的文件是随着 atom 的启动而打开的,但现在这真是一场灾难。该怎么办?

atom
  • 2 个回答
  • 10 Views

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    我看不懂措辞

    • 1 个回答
  • Marko Smith

    请求的模块“del”不提供名为“default”的导出

    • 3 个回答
  • Marko Smith

    "!+tab" 在 HTML 的 vs 代码中不起作用

    • 5 个回答
  • Marko Smith

    我正在尝试解决“猜词”的问题。Python

    • 2 个回答
  • Marko Smith

    可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件?

    • 1 个回答
  • Marko Smith

    Python解析野莓

    • 1 个回答
  • Marko Smith

    问题:“警告:检查最新版本的 pip 时出错。”

    • 2 个回答
  • Marko Smith

    帮助编写一个用值填充变量的循环。解决这个问题

    • 2 个回答
  • Marko Smith

    尽管依赖数组为空,但在渲染上调用了 2 次 useEffect

    • 2 个回答
  • Marko Smith

    数据不通过 Telegram.WebApp.sendData 发送

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5