[React] material ui로 TextField 사용 중, 유효성(validation) 체크하는 방법

텍스트필드에, 잘못된 값을 집어넣거나 빈 값을 입력했다면 경고를 띄우고 싶다.

어떻게 하면 될까?

errorText라는 속성이 있었으나, 요즘은 error와 helperText를 사용하면 된다.

텍스트필드를 빨간색으로 변화시켜 에러처럼 보이게 만드는 것이 error 속성이다.

error는 true/false 즉, Boolean형으로 값을 지정할 수 있다.

조건을 걸면 된다.

<TextField

autoFocus

error={this.state.data.customer === "" ? true : false }

helperText="This is Helper Text"

label="고객명(customer)"

type="text"

variant="outlined"

onChange={this.handleChange}

name="customer"

defaultValue={data.customer}

요런식으로 사용하게 되면 ,조건에 따라 체크된다.

helperText의 경우, error 밑에 출력되는 문자열로 에러가 났을 때

어떤 이유로 에러가 발생했는지 알려주기 위한 용도로 사용된다.