/
githubmirror
/
redux
Обзор
Документация
Войти
/
githubmirror
/
redux
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
examples/real-world/src/components/Explore.js
63 строки
1 KB
Tim Dorr
Format the examples
20 мар 2024, 19:52
Не верифицирован
20 мар 2024, 19:52
3085048
Код
Авторство
О чём код?
/* eslint-disable no-undef */ import React, { Component } from 'react' import PropTypes from 'prop-types' const GITHUB_REPO = 'https://github.com/reduxjs/redux' export default class Explore extends Component { static propTypes = { value: PropTypes.string.isRequired, onChange: PropTypes.func.isRequired } componentDidUpdate(prevProps) { if (prevProps.value !== this.props.value) { this.setInputValue(this.props.value) } } getInputValue = () => { return this.input.value } setInputValue = val => { // Generally mutating DOM is a bad idea in React components, // but doing this for a single uncontrolled field is less fuss // than making it controlled and maintaining a state for it. this.input.value = val } handleKeyUp = e => { if (e.keyCode === 13) { this.handleGoClick() } } handleGoClick = () => { this.props.onChange(this.getInputValue()) } render() { return ( <div> <p>Type a username or repo full name and hit 'Go':</p> <input size="45" ref={input => (this.input = input)} defaultValue={this.props.value} onKeyUp={this.handleKeyUp} /> <button onClick={this.handleGoClick}>Go!</button> <p> Code on{' '} <a href={GITHUB_REPO} target="_blank" rel="noopener noreferrer"> Github </a> . </p> <p>Move the DevTools with Ctrl+W or hide them with Ctrl+H.</p> </div> ) } }