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

8XL

Я высокий, но ниже, чем вы подумали.
Ответы пользователя по тегу React

  • Отлов изменения дочернего компонента?

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали.
    Храните состояние в родительском компоненте и передавайте методы в пропсах дочернему. 

    class Parent extends React.Component {

    constructor(props) {
        super(props)
        this.testInputValue = ''
    }

    handleChange(event) {
        this.testInputValue = event.target.value
    }

    log_test_input_value = () => {
        console.log(this.testInputValue);
    }

    render() {
        return (
             <div>
              <button onClick={log_test_input_value}>Test log</button>
              <Child onChange={ this.handleChange }/>
            </div>
        )
    }
}
    Ответ написан
    2 комментария
    2 комментария

  • Как изменить состояние родителя из дочернего компонента React?

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали.
    Верное решение подсказали, слегка разберу для понимания.
    <Parent>
  <Children openModal={this.state.openModal} onChange={this.onChange} />
<Parent />


    в Parent объявите метод 
    onChange=()=>{
  this.setState({openModal : true})
}


    В Children так 
    <div onClick={this.props.onChange}>
  ...какие-то элементы...
</div>


    Всё просто)

    Но еще проще и гораздо надежнее https://ru.reactjs.org/docs/lifting-state-up.html
    Ответ написан
    5 комментариев
    5 комментариев

  • Как скрыть компонент в React при клике вне компонента?

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали. 
    React.useEffect(()=>{
  document.addEventListener('onmousedown', handleClick)
    return()=> document.removeEventListener('onmousedown', handleClick)
}, [])


    Объяснение:
    React.useEffect(()=>{
//вешаем листенер
  document.addEventListener('onmousedown', handleClick) 
// в зависимости хука заносим пустой массив. Таким образом мы с помощью хука выполним метод
 //componentDidMount(), вызвав useEffect 1 раз
}, [])


    React.useEffect(()=>{
...какой-то код...
//удаляем листенер
 return ()=> document.removeEventListener('onmousedown', handleClick)
//после return прописываем методы, которые нужно выполнить после при размонтировании компонента
//componentWillUnmount() аналог на хуках
}, [])


    про useRef очень доступно и удобно написано в документации. Принцип такой же, как в вашем примере, только обращение к свойствам немножко иначе (refName.current...)
    Ответ написан
    1 комментарий
    1 комментарий

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

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали.
    Я могу ошибаться, но разве это не решается:
    1. Либо передачей метода в пропсы дочернего компонента(в таком случае состояние модального окна хранится в родительском компоненте). Модальное окно подписано на состояние showModal, а компонент Service в пропсы получает сам метод изменения состояния модального окна.
    2. Так как компоненты классовые, можно обратиться к нативному js и воспользоваться методом super()...но не уверен, что это будет хорошим решением.
    3. Либо, как предложила Zhanna_K, переписав стили компонента на абсолютное позиционирование.
    Ответ написан
    Комментировать
    Комментировать

  • Как прописать классы в css modules в зависимости от условия (React)?

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали.
    Можно без лишних стейтов обойтись.

    <LastAppointments name={'LastAppointments'} />

    То есть передаешь в пропсы компонента его имя(ну или любой другой идентификатор)

    <div className={ props.name == 'LastAppointments' ? 'row' : 'column' }> какой то код </div>


    В самом диве проверяешь, какое имя пришло в пропсах.
    Ответ написан
    Комментировать
    Комментировать

  • Как в React отменить перезагрузку страницы при клике на кнопку и при том же клике сразу вызвать другую функцию?

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали. 
    const handleClick = (e) => {
 e.preventDefault();
SpeechRecognition.startListening({ continuous: true, language: 'ru' })
}

onClick = { handleClick }
    Ответ написан
    Комментировать
    Комментировать

  • Как использовать document.querySelector в React?

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали.
    Говорят, что подобное вообще плохой тон в реакте(в райнем случае есть рефы), но я могу ошибаться.
    Касаемо querySelector https://ru.reactjs.org/docs/react-without-jsx.html ознакомьтесь, тут про ваш вопрос.

    querySelector: почитайте про рефы, они больше про реакт и jsx.
    Трансформ меняется <div style={{transform : `rotateZ(${hh...}deg)`> Элемент, который меняете .
    Ответ написан
    5 комментариев
    5 комментариев

  • Рендеринг массива с ограничением по длине и подстановкой "+хх more"?

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали.
    Мне вот просто интересна критика своей версии, на истинность не претендую:
    через реф1 мы получаем ширину контейнера, затем вешаем рефы на каждый элемент массива, получаем их(елементов массива) ширину и индекс в массиве, складываем ширину элементов до ширины контейнера, остальные пeшим в новый массив, который развернется(если я правильно понял функционал) по клику +xxmore. Таким образом лишнего мы не рендерим, а в случае нужды - можем получить.
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно использовать useCallback в React?

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали. 
    function Child ({data, sayHi}) {

  const handleClick = useCallback(el => {
    sayHi(el)
  }, [])

  return (
    <div className="App">
      {data.map(el=>
        <div
          onClick={()=>handleClick(el)}
        >
          {el}
        </div>
      )}
    </div>
  )
}

export default function App() {
  const data = [1,2,3,4]
  
  const sayHi = (el) => {
    console.log('Hi '+ el)
  } 

  return (
    <Child data={data} sayHi={sayHi} />
  )
}


    Вы обманываете, тут нет ошибки в хуке.

    По-факту же ошибку вызывает doSomething( ), в которой, скорее всего, вызывается setState( ), который вызывает рендер и так далее до бесконечности, что не позволяет отрендерить.
    Ответ написан
    2 комментария
    2 комментария

  • Почему свойство кнопки onClick у кнопки срабатывает при загрузке страницы а не по нажатию?

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали.
    Вот предыдущие два ответа верны, только уточню, что в твоем случае ты рендеришь не событие по клику, а просто алерт, а правильным решением, указанным раннее, будет вызвать анонимную/не анонимную(это лучше) функцию, которая и обработает событие.
    Ответ написан
    Комментировать
    Комментировать

  • Что здесь является this?

    8XL
    @8XL
    Я высокий, но ниже, чем вы подумали.
    Я не очень понял твоё понимание("великий и могучий..."), но суть такова:
    (попытаюсь на пальцах, ибо сам в теории не силен)
    в пропсы компонента Square опускается не только вэлью(крестик или нолик), но и setState, обернутый в handleClick. То есть, таким образом, кликая по баттону в Square, фактически ты меняешь состояние компонента Board (

    handleClick(i) {
    const squares = this.state.squares.slice();
    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
    squares: squares,
    xIsNext: !this.state.xIsNext,
    });     (вот тут).

    А this. говорит реакту, что нужно передать handleClick из этого компонента.
    Ответ написан
    Комментировать
    Комментировать

  • Drag'n'drop - почему выводится старое состояние в useEffect?

    8XL
    @8XL Автор вопроса
    Я высокий, но ниже, чем вы подумали.
    Практически доведя себя до экзистенциального кризиса так нашел решение. Оставлю на случай, если кто столкнется с потерей состояния из-за слушателя событий внутри хука useEffect.

    React.useEffect(()=>{
// добавление слушателя на все окно
    window.addEventListener('mousemove', mouseMove); 
    window.addEventListener('mouseup', mouseUp);
    
      return () => {
// удаление слушателя после обновления эффекта
        window.removeEventListener('mousemove', mouseMove); 
        window.removeEventListener('mouseup', mouseUp);
      }             
    }
  )

// эвент движения
  const mouseMove = (e) => { 
    if(motion.active){
// считаем дельту положения мышки в моменте и первоначального положения
      const delta = e.pageY - motion.stY;

    // вот тут и далее ВАЖНО для эффекта(!!!) стэйт функционально задать!
    setMotion(motion=>( 
          {
            ...motion,
            y: delta
          }
        )
      )
    }
  }

// эвент отпускания клавиши и конец днд
  const mouseUp = () =>{
    setMotion(motion=>(
      {
        ...motion,
        i: null,
        active: false,
        y: 0,
      })
    )
  }
    Ответ написан
    Комментировать
    Комментировать