[JavaScript/React] 텍스트 상자에 입력 티에크 구현

이 기사에서 쓰기

React를 사용하여 텍스트 상자 입력 확인 구현

이미지

1. 텍스트 상자에 문자를 입력하거나 삭제하면 현재 텍스트 상자에 입력된 문자가 콘솔에 표시됩니다.

2. 텍스트 상자에 문자를 입력하지 않은 경우
· "문자를 입력하십시오."라는 문구를 화면에 표시합니다.
· false를 콘솔에 표시합니다.

3. 텍스트 상자에 문자를 입력하지 않은 경우
· "문자를 입력하십시오."라는 문구가 화면에 표시되지 않습니다.
· true를 콘솔에 표시합니다.

개발 환경

개발환경은 다음과


품목



PC
MacBook Air

OS
MacOS Catalina ver 10.15.2

브라우저
Chrome

에디터
CodeSandbox



참고
CodeSandbox 를 이용하는 것으로, 언제나 이용하고 있는 브라우저상에서 React 를 코딩할 수 있다.

파일 배치

src/styles.css ※
src/index.js
public/index.html ※
App.js
Form.js
package.json ※

※ ... CodeSandbox のデフォルトのコードを使用するため変更箇所なし

코드 예

src/index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "../App"; // App.js をインポート
import "./styles.css";

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

App.js

import React from "react";
import Form from "./Form"; // Form.js をインポート

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <br />
        <Form title="Form1" />
        <br />
        <Form title="Form2" />
      </div>
    );
  }
}

export default App; // App.js をエクスポート

Form.js

import React from "react";

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isTextValid: false };
  }

  isTextValid(event) {
    const inputText = event.target.value;
    console.log(inputText);

    if (inputText === "" || inputText.length === 0) {
      console.log(false);
      this.setState({ isTextValid: false });
      return false;
    } else {
      console.log(true);
      this.setState({ isTextValid: true });
      return true;
    }
  }

  handleErrorText() {
    if (this.state.isTextValid === false) {
      return <p>文字を入力してください。</p>;
    }
  }

  render() {
    return (
      <div>
        <h2>{this.props.title}</h2>
        <form action="#">
          {this.handleErrorText()}
          <input
            type="text"
            onChange={event => {
              this.isTextValid(event);
            }}
          />
          <br />
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}

export default Form; // Form.js をエクスポート

포인트

event.target.value 에서 텍스트 상자에 입력하는 문자 얻기

Form.js(일부 발췌)

  isTextValid(event) {
    const inputText = event.target.value;
    console.log(inputText);

    if (inputText === "" || inputText.length === 0) {
      console.log(false);
      this.setState({ isTextValid: false }); // this.state.isTextValid を false に更新
      return false;
    } else {
      console.log(true);
      this.setState({ isTextValid: true }); // this.state.isTextValid を true に更新
      return true;
    }
  }

Form.js(일부 발췌)

render() {
    return (
      <div>
        <h2>{this.props.title}</h2>
        <form action="#">
          {this.handleErrorText()}
          <input
            type="text"
            onChange={event => {
              this.isTextValid(event);
            }} 
          /> // onChange に isTextValid メソッドを設定
          <br />
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }