React 학습-구성 요소의 3대 속성

1.state

state는 구성 요소 대상의 가장 중요한 속성이고 값은 대상(여러 개의 데이터를 포함할 수 있음)

구성 요소는'상태기'라고 불리며 구성 요소의state를 업데이트하여 대응하는 페이지 디스플레이를 업데이트합니다

사례:
요구사항: 사용자 정의 구성 요소, 기능은 다음과 같다.h2 제목을 표시합니다. 초기 텍스트는 다음과 같습니다.제목 업데이트 클릭: 난 널 좋아해




    
    test











    /*
           ： ， ：
            1. h2 ， ： 
            2. ： 
        * */
    //1. 
    class Like extends React.Component{
        constructor(props) {
            super(props);
            // 
            this.state ={
                isLikeMe:false
            }
            // this 
            this.handleClick = this.handleClick.bind(this)
        }

        // 
        handleClick(){
            // 
            const isLikeMe = !this.state.isLikeMe
            // 
            this.setState({isLikeMe})
        }

        render(){
            const {isLikeMe} = this.state
            return <h2 onClick={this.handleClick}>{isLikeMe?' ':' '}</h2>
        }
    }
    //2. 
    ReactDOM.render(<Like/>,document.getElementById('example'))

코딩 작업

1.初始化状态

constructor (props) {

super(props)

this.state = {

stateProp1 : value1,

stateProp2 : value2

}

2.读取某个状态值

this.state.statePropertyName

3.更新状态---->组件界面更新

this.setState({

stateProp1 : value1,

stateProp2 : value2

})

知识点：

1.onClick：onclick 事件会在元素被点击时发生，当按钮被点击时执行Javascript代码，用在事件监听上

{isLikeMe?'너는 나를 좋아해':'나는 너를 좋아해'}

2.bind 메서드
this.handleClick.bind(this)의 반환값은this를 위한 새로운 함수입니다.handleClick이 한 부를 복사했습니다. 두 사람은 이미 아무런 관계가 없습니다. 같은 메모리 주소에 없습니다. isLikeMe는True로 되돌아왔습니다.

2.props

 :  
  1).  
  2).  ,  
  3).  ,  18




    
    05_component_props










    /*
 ： ， 。 
1）. ， 
2）. ， 18
*/
    //1. 
   /* function Person(props) {

        return (
            <ul>
                <li> :{props.name}</li>
                <li> :{props.age}</li>
                <li> :{props.sex}</li>
            </ul>
        )
    }*/
   class Person extends React.Component{
       render(){
           return (
               <ul>
               <li> :{this.props.name}</li>
               <li> :{this.props.age}</li>
               <li> :{this.props.sex}</li>
           </ul>
           )
       }
   }
    // 
    Person.defaultProps={
        sex: ' ',
        age: 18
    }
    // 
    Person.propTypes={
        name:PropTypes.string.isRequired,
        age:PropTypes.number,
    }
    //2. 
    const p1 = {
        name:'Tom',
        age:19,
        sex:' '
    }
    /*
    ... 
    1. 
    2. 
     */

    //ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex}/>,document.getElementById('example1'))
    ReactDOM.render(<Person {...p1}/>,document.getElementById('example1'))

    const p2={
        name:'JACK',
    }
    ReactDOM.render(<Person name={p2.name}/>,document.getElementById('example2'))

이해:

모든 구성 요소 대상에props(properties의 약자) 속성이 있음

구성 요소 탭의 모든 속성은props에 저장됩니다

역할:

탭 속성을 통해 구성 요소에서 구성 요소로 변화하는 데이터를 전달

주의: 구성 요소 내부에서props 데이터를 수정하지 마십시오

코딩 작업

1. 내부 읽기 속성 값
this.props.propertyName
2. props의 속성 값에 대해 유형 제한과 필요성 제한
Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number.isRequired
}
3. 확장 속성: 대상의 모든 속성을 props를 통해 전달
4. 기본 속성 값
Person.defaultProps = {
name: 'Mary'
}
5. 구성 요소 클래스의 구조 함수
constructor (props) {
super(props)
console.log(props)//모든 속성 보기
}

3.refs-event

요구사항: 맞춤형 구성 요소, 기능 설명은 다음과 같다.버튼을 누르면 첫 번째 입력 상자의 값을 알려 줍니다.두 번째 입력 상자가 초점을 잃었을 때, 이 입력 상자의 값을 알려 줍니다




    
    06_component_refs_event









    /*
    *  :  ,  :
        2.  ,  
        3.  2 ,  
    */
    //1. 
    class MyComponent extends React.Component{


        constructor(props) {
            super(props);
            this.showInput=this.showInput.bind(this)
        }

        showInput(){
            const input = this.refs.content
            //alert(input.value)
            alert(this.input.value)
        };
        handleBlur(event){
            alert(event.target.value)
        }
        render(){
            return(
                <div>
                    <input type="text" ref="content"/>&nbsp;&nbsp;
                    <input type="text" ref={input => this.input = input}/>&nbsp;&nbsp;
                    <button onClick={this.showInput}> </button>&nbsp;&nbsp;
                    <input type="text" placeholder=" " onBlur={this.handleBlur}/>
                </div>
            )
    }
    }
    //2. 
    ReactDOM.render(<MyComponent/>,document.getElementById('example1'))

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

highcharts 데이터 테이블 설정 두 가지 등효 방식의 쓰기

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

React 학습-구성 요소의 3대 속성

1.state

코딩 작업

{isLikeMe?'너는 나를 좋아해':'나는 너를 좋아해'}

2.props

코딩 작업

3.refs-event

좋은 웹페이지 즐겨찾기