React37 Route Component에 props 전달하기 2020. 8. 10. className 에 if문 적용하기 https://www.pluralsight.com/guides/applying-classes-conditionally-react Applying Classes Conditionally in React | Pluralsight At some point, when building a React component, you'll run into a situation where you need to apply a class based on some condition. Perhaps, you need to make an image bigger based on some state, or you need to make the image round instead of square based www.pluralsight... 2020. 7. 31. htmlReactParser (html parsing) {htmlReactParser(errorMessage)} 2020. 7. 27. 비밀번호 변경 폼 resetpassword form handleEvent const handleEvent = (e: React.ChangeEvent | React.FocusEvent): void => { const { value } = e.currentTarget; const { name: targetName } = e.target; if (targetName === 'password') { setPassword(value); } else if (targetName === 'passwordNew') { setPasswordNew(value); } else if (targetName === 'passwordNewRe') { setPasswordNewRe(value); } }; {t('영문 대/소문자, 숫자, 특수문자 포함 8~24자')} {t('연속적인 숫자 사용불가(예:111.. 2020. 7. 27. 비밀번호 변경 버튼 resetpassword button event const handleButtonClick = (e: React.MouseEvent) => { e.preventDefault(); if (passwordNew !== passwordNewRe) { setErrorMessage( lineBreakToBr( t("입력한 비밀번호가 일치하지 않습니다.\\n'새 비밀번호'와 '새 비밀번호 확인'을 다시 입력해 주세요.") ) ); } }; e.preventDefault(); 2020. 7. 27. 큰따옴표 안에 작은따옴표 넣어야 할 때 t(" ' ' ") /* eslint-disable quotes */ 2020. 7. 27. [React] input value check 인풋 값 체크 handleCreate = () => { const { input, todos } = this.state; if (this.state.input != '') { this.setState({ input: '', //input 내용 비우기 todos: todos.concat({ id: this.id++, text: input, checked: false, }), }); } }; 2020. 6. 4. onClick 시 다른 요소 Toggle 시키기 class ToggleMenu extends React.Component { constructor(props) { super(props); this.state = { visible: false }; this.toggleMenu = this.toggleMenu.bind(this); } toggleMenu() { this.setState({visible: !this.state.visible}) } render() { return ( Show Right Menu! {this.state.visible && First Page Second Page Third Page } ); } } 2020. 4. 10. this.toggle 여러개 작동하게 코딩하기 class ModalExample extends React.Component { constructor(props) { super(props); this.state = { modal: true, tooltipOpen: false }; this.toggleModal = this.toggleModal.bind(this); this.toggleTooltip = this.toggleTooltip.bind(this); } toggleModal() { this.setState({ modal: !this.state.modal }); } toggleTooltip() { this.setState({ tooltipOpen: !this.state.tooltipOpen }); } ... } 2020. 4. 10. 이전 1 2 3 4 5 다음