Last active
October 14, 2021 01:31
-
-
Save aidiary/474012b43e7b8c31bff5e965fae9dd43 to your computer and use it in GitHub Desktop.
styled-componentsによるスタイル付け
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState } from 'react'; | |
import styled from 'styled-components'; | |
import Button from '../../UI/Button/Button'; | |
const FormControl = styled.div` | |
margin: 0.5rem 0; | |
& label { | |
font-weight: bold; | |
display: block; | |
margin-bottom: 0.5rem; | |
color: ${(props) => (props.invalid ? 'red' : 'black')}; | |
} | |
& input { | |
display: block; | |
width: 100%; | |
border: 1px solid ${(props) => (props.invalid ? 'red' : '#ccc')}; | |
background: ${(props) => (props.invalid ? '#ffd7d7' : 'transparent')}; | |
font: inherit; | |
line-height: 1.5rem; | |
padding: 0 0.25rem; | |
} | |
& input:focus { | |
outline: none; | |
background: #fad0ec; | |
border-color: #8b005d; | |
} | |
`; | |
const CourseInput = (props) => { | |
const [enteredValue, setEnteredValue] = useState(''); | |
const [isValid, setIsValid] = useState(true); | |
const goalInputChangeHandler = (event) => { | |
if (event.target.value.trim().length > 0) { | |
setIsValid(true); | |
} | |
setEnteredValue(event.target.value); | |
}; | |
const formSubmitHandler = (event) => { | |
event.preventDefault(); | |
if (enteredValue.trim().length === 0) { | |
setIsValid(false); | |
return; | |
} | |
props.onAddGoal(enteredValue); | |
}; | |
return ( | |
<form onSubmit={formSubmitHandler}> | |
<FormControl invalid={!isValid}> | |
<label>Course Goal</label> | |
<input type='text' onChange={goalInputChangeHandler} /> | |
</FormControl> | |
<Button type='submit'>Add Goal</Button> | |
</form> | |
); | |
}; | |
export default CourseInput; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment