리액트 react / onChange / readOnly / TypeError / 입력 / 클릭 기본 셋팅

-

value를 이용해 수정할 값을 넣어놓은 경우 onChange이벤트 함수가 없으면 무조건 readOnly처리가 된다.

그래서 수정이 안 되는 것이었음

수정하도록 할거면 onChange함수를, 그냥 값만 가져오는 거면 readOnly옵션을 꼭 주어야 한다.

 

state = {

            textareaValue: '',

            seperatorValue: '',

        }

 

 

    onChange = (e:any) => {

        this.setState({

            textareaValue: e.target.value

        })

    }

    onChangeSeperator = (e:any) => {

        this.setState({

            seperatorValue: e.target.value

        })

    }

 

                <textarea className='txtArea' placeholder='엔터를 치면 다음 데이터로 인식합니다.' onChange={this.onChange}/><br/>

 

이렇게 했는데 submit 누르면 

 

    subBtnClick(){

        alert(this.state.textareaValue + '\n' + this.state.seperatorValue)

        this.setState({

            textareaValue: '',

            seperatorValue: '',

        })

    }

에러남

TypeError: Cannot read property 'state' of undefined

import React, { Component } from 'react';

import '../InputData.css';

 

export default class InputData extends Component<any,any> {

    constructor(props:any){

        super(props);

        this.state = {

            textareaValue: '',

            seperatorValue: '',

        };

        this.onChange = this.onChange.bind(this);

        this.onChangeSeperator = this.onChangeSeperator.bind(this);

        this.subBtnClick = this.subBtnClick.bind(this)

    }

    subBtnClick(){

        alert(this.state.textareaValue + '\n' + this.state.seperatorValue)

        this.setState({

            textareaValue: '',

            seperatorValue: '',

        })

    }

    onChange = (e:any) => {

        this.setState({

            textareaValue: e.target.value

        })

    }

    onChangeSeperator = (e:any) => {

        this.setState({

            seperatorValue: e.target.value

        })

    }

    render() {

        return (

            <div>

                <textarea className='txtArea' placeholder='Seperator로 지정한 구분자로 테이블에 넣을 데이터의 열을 구분하세요.

엔터를 치면 다음 행으로 이동하여 데이터를 삽입합니다.' onChange={this.onChange} value={this.state.textareaValue}/><br/>

                <div className='sepFontDiv'>Separator </div> 

                <input type="text" className='sepSimbol' placeholder='데이터 각 열 분리 구분자' onChange={this.onChangeSeperator} value={this.state.seperatorValue}/> 

                <button className='subBtn' onClick={this.subBtnClick}>💾 Submit</button>

            </div>

        );

    }

}

*Component <any,any> 이부분 any,any 없어서 오류난 것

이게 입력, 클릭의 기본 셋팅.