Задать вопрос

Александр Чернокондратенко

frontend developer
Ответы

  • Как сделать import всех (*) если есть только один export default?

    @Kapiroska
    frontend developer
    1) Если у вас в './api' экспортируется функция, то как вариант можно сделать так:
    import yourFunc from './api';
const api = {}
api.yourFunc = yourFunc

    2) Еще возможен такой вариант, как вы описали
    import * as api from './api';
тогда в api.default будет ваша функция
но думаю этот вариант не подходит, так как ключ другой

    3) В './api' 
    function yourFunc() {

}
const api = {}
api.yourFunc = yourFunc;
export default api;

    4) В './api' 
    function yourFunc() {

}
export default { yourFunc  }

    В файле, где тест:
    import * as api from './api'
сonsole.log(api.default) выведит ваш объект с методом yourFunc

    5) Если из './api' экспортируется объект, то Владлен Хеллсайт уже ответил на ваш вопрос
    Ответ написан
    4 комментария
    4 комментария

  • Как работает область видимости в JS?

    @Kapiroska
    frontend developer
    Вы присваиваете новое значение переменной lastPosY уже после того, как вывели предыдущее значение в консоль, так как предыдущее значение равно 0, то и в консоль всегда попадает 0.
    Можно пройтись дебаггером в Chrome DevTools и быстро понять, что происходит.

    function move_modal(ev) {
  console.log(lastPosY); // Шаг 3. выводиться значение из Шага 1
  if (!isDragging) {
      isDragging = true;
      lastPosY = modal_addproduct.offset().top; // Шаг 4. lastPosY === modal_addproduct.offset().top
  }
  // Шаг 5. console.log(lastPosY) Выведеться информация из Шага 4
  var posY = ev.gesture.deltaY + lastPosY;


  modal_addproduct.css('top', posY + "px");

  if (ev.isFinal) {
      isDragging = false;
  }
}

var lastPosY = 0;  // Шаг 1. lastPosY === 0
var isDragging = false;

var modal_header = $('.modal-header');
var modal_addproduct = $('#addproduct');
modal_header.hammer({direction: Hammer.DIRECTION_ALL, threshold: 0}).bind("pan", function (ev) {
  move_modal(ev); // Шаг 2. вызываем функцию
});


    Вот облегченный пример того, что происходит

    function move_modal(ev) {
  console.log(lastPosY) // 0
  lastPosY = 4;
  console.log(lastPosY) //4
}

var lastPosY = 0;

move_modal();
    Ответ написан
    1 комментарий
    1 комментарий

  • Как поменять состояние у другого компонента в React?

    @Kapiroska
    frontend developer
    Вам необходимо поднять состояния от детей до общего родителя
    Ссылка на документацию: https://reactjs.org/docs/lifting-state-up.html

    App.js
    import React, { Component } from 'react';
import Form from './Form';
import Button from './Button';

class App extends Component {
  state = {
    isChecked: false,
  }
  handleInputChange = event => {
    this.setState({ isChecked: event.target.checked })
  }
  handleButtonClick = () => {
    this.setState({ isChecked: !this.state.isChecked })
  }
  render() {
    return (
      <div className="App">
        <Form
          handleInputChange={this.handleInputChange}
          isChecked={this.state.isChecked}
          />
        <Button handleButtonClick={this.handleButtonClick}/>  
      </div>
    );
  }
}

export default App;


    Button.jsx
    import React from 'react';

const Button = ({ handleButtonClick }) => (
  <div>
    <button onClick={handleButtonClick}>
      clickme
    </button>
  </div>
)

export default Button;


    Form.jsx
    import React from 'react';

const Form = ({ isChecked, handleInputChange }) => (
    <input
        type="checkbox"
        checked={isChecked}
        onChange={handleInputChange}
    />
)

export default Form;
    Ответ написан
    Комментировать
    Комментировать

  • Как прикрутить прослушивалку change к div?

    @Kapiroska
    frontend developer
    Документация: https://developer.mozilla.org/en-US/docs/Web/API/M...
    Рабочий пример: https://codepen.io/kapiroskaa/pen/opEEYP

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="product_select_value" style="font-weight:bold">2</div>
  <input type="text" id="input">
  <script src="index.js"></script>
</body>
</html>


    // Input for changing target DIV
const input = document.getElementById('input')
input.addEventListener('change', function(e) {
  targetNode.innerHTML = e.target.value
})

// Select the node that will be observed for mutations
const targetNode = document.getElementById('product_select_value')

// Callback function to execute when mutations are observed
function callback(mutationsList) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            if(mutation.target.textContent === '1') {
              console.log('Hide some data')
            } else {
              console.log('Show some data')
            }
        }
    }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback)

// Start observing the target node for configured mutations
observer.observe(targetNode, { childList: true })

// Later, you can stop observing
// observer.disconnect()
    Ответ написан
    1 комментарий
    1 комментарий