主页 / user-342016

Cat_In_Ears's questions

Martin Hope
Cat_In_Ears
Asked: 2020-12-19 14:46:48 +0800 CST
  • 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
Martin Hope
Cat_In_Ears
Asked: 2020-09-20 12:20:53 +0800 CST
  • 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
Martin Hope
Cat_In_Ears
Asked: 2020-07-08 23:38:51 +0800 CST
  • 1

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

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

jquery
Martin Hope
Cat_In_Ears
Asked: 2020-07-08 14:00:25 +0800 CST
  • 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
Martin Hope
Cat_In_Ears
Asked: 2020-07-02 17:23:03 +0800 CST
  • 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