react.js 시작하기 190807 - html 활용하기

사용자에게 주의나 줘보자

class App extends Component {
  
  f1 =()=>{
    alert(`경고창`)//띄워짐
  }
  f2 = ()=>{
    console.log(
    prompt(`입력ㄱㄱ`,`this is default`)//return이 있다.
    );
  }
  f3 = ()=>{
    window.confirm(`confirm`) //리액트에서는 window. 붙여야함
    //submit하겠냐? return값이 있다
  }
     ......

다양한 주의창

 

onClick안에 익명함수를 선언해서 사용해도 된다.

  render() {
    return (
      <div>
        <button onClick={this.f1}>f1</button>
        <button onClick={this.f2}>f2</button>
        <button onClick={this.f3}>f3</button>
        <button onClick={()=>{
          alert(`gd`)
        }}>button</button>
      </div>
    );
  }

 

주의창의 활용

class App extends Component {
  
  f1 =()=>{
    alert(`경고창`)//띄워짐
  }
  f2 = ()=>{
    console.log(
    prompt(`입력ㄱㄱ`,`this is default`)//return이 있다.
    );
  }
  f3 = ()=>{
    window.confirm(`confirm`) //리액트에서는 window. 붙여야함
    //submit하겠냐? return값이 있다
  }

  render() {
    return (
      <div>
        <button onClick={this.f1}>f1</button>
        <button onClick={this.f2}>f2</button>
        <button onClick={this.f3}>f3</button>
        <button onClick={()=>{
         console.log(`gd`);
        }}>button</button>
      </div>
    );
  }
}

 

인풋태그 onChange

        <input 
        type='text' 
        name='msg' 
        placeholder='default msg' 
        onChange={(event)=>{//event는 아무거나 와도 상관 없다.
          console.log(`온체인지`,event.target.value);//글자가 변경 될때 마다   
        }}/>