React(0.13)는 입력한 값을 대문자로 바꾸는 input 구성 요소를 정의합니다

4109 단어 
<!DOCTYPE html>
<html>
    <head>
        <title>React JS</title>
        <script src="../build_0.13/react.js"></script>
        <script src="../build_0.13/JSXTransformer.js"></script>
        <script>
            function dateToString(d){
                return [d.getFullYear(), d.getMonth()+1, d.getDate()].join('-');
            }
        </script>
        
    </head>
    <body>
        
        
        <div id="example">
        
        </div>
        
        <script type="text/jsx">
            var MyForm = React.createClass({
                    // 
                    getInitialState:function(){
                        return {helloTo:"hello world!"};
                    },
                    //onchange 
                    handleChange:function(event){
                        this.setState({
                            helloTo:event.target.value.toUpperCase()
                        });
                    },
                    // 
                    submitHandler:function(event){
                        event.preventDefault();    // 
                        alert(this.state.helloTo);
                    },
                    render:function(){
                        return (
                            <form onSubmit={this.submitHandler} >
                                <input ref="helloTo" type="text" value={this.state.helloTo}
                                    onChange={this.handleChange} />
                                <br/>
                                <button type="submit">speak</button>
                            </form>
                        );
                    }
            });
            
            // 
            React.render( <MyForm />, document.getElementById('example') );
    
        </script>
    </body>
</html>

참고:
　　1.구성 요소 이름: 첫 번째 문자는 대문자로 하고 낙타 봉법으로 명명합니다.
　　2.onchange, onsubmit 이벤트는 Render에서 낙타봉법의 이름을 사용해야 합니다. onChange={this.handleChange} 이렇게 쓰면 안 됩니다. onChange="{this.handleChange}"
　　3.이벤트를 통해서.target은 실제 DOM 노드를 터치합니다. 이것은 제약 구성 요소에 접근하는 가장 간단하고 직접적인 방법 중 하나입니다.
　　　　handleEvent:function(event){
　　　　　　var DOMNode = event.target;
　　　　　　var newValue = DOMNode.value;
　　　　}
Java 개발을 위한 설정 VS 코드
html 클릭 이미지 업로드 및 표시

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage