4.To Do List Add Component

silver·2020년 8월 22일
0

ToDoList

목록 보기
4/7

4.input value가져오고 추가하기

state = {
        text: '',
    };

    handleChange = (e) => {
        this.setState({
            text: e.target.value,
        });
    };

    handleSubmit = () => {
        this.props.onCreate(this.state);
        this.setState({
            text: '',
        });
    };
 render() {
 return(
 <input value={text}
        onChange={this.handleChange}/>
 <button onClick={this.handleSubmit}/>
 );

-변경될 input 값을 state에 넣어주고,
handleChange함수를 만들어 변경된 input value를 받아온다.

-handleSubmit 함수를 만들어 App.js 에 onCreate(변경된 text값)을 넣고 input 값을 비워준다.

react bootstrap livrary

터미널 - npm install react-bootstrap bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button, InputGroup, FormControl } from 'react-bootstrap';
profile
거북이개발자

0개의 댓글