React js - 자식 컴포넌트에서 input 컴포넌트 사용하기

child Component 에서 updateState진행할때

parent에서 작성법

<Contetnt myDataProp = {this.state.myvalue} updateStateProp = {this.updateState}></Contetnt>

여기서 this.state.mvalue는 child Component에서 this.props.myvalueProp로 사용가능하고

this.updateState는 this.props.updateStateProp으로 사용할 수 있다.

 

 

 

오늘 진행한 코드

 

​x
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './App.css';
​
class App extends Component {
​
  constructor() {
    super();
  
    this.state = {
      sentence: "",
      num: 0
    }
​
    this.setStateHandler = this.setStateHandler.bind(this);
    this.updateState = this.updateState.bind(this);
  };
​
  setStateHandler() {
​
    this.setState((prevState, props) => {
      return {num : prevState.num+1}
    });
​
    var a = document.getElementById("a")    
    ReactDOM.findDOMNode(a).style.color = 'green'
  };
​
  updateState(e) {
    this.setState({
      sentence: e.target.value
    });
  }
​
  render() {
    return(
      <div>
      <div>
        <h1 id='a'>NUM is {this.state.num}</h1>
        <button onClick={this.setStateHandler}>증가시키기</button>
​
        <H4 mynum={this.state.num}></H4>
      </div>
​
      <div>
        <h3>{this.state.sentence}</h3>
        <input type="text" placeholder="Write...  " value={this.state.sentence} onChange={this.updateState}></input>
      </div>
      </div>
    );
  }
​
}
​
class H4 extends Component {
  componentWillMount() {
    console.log("component will MOUNT!");
  }
  componentDidMount() {
    console.log("component did MOUNT!");
  }
​
  render() {
    return (
    <div>
      <h4>{this.props.mynum}</h4>
      </div>
      );
    
  }
​
};
​
export default App;