react学习（20）非受控组件

知识点：
1：对于表单：form的action属性是用来标识表单要提交的地址，form有一个onsubmit原生事件，当点击按钮时，用于表单的提交。但是默认页面会刷新，所以需要阻止默认行为，在onsubmit中写一些逻辑。也可以给button绑定一个click事件做一些逻辑。
2：对于写action的默认是get方式，需要给输入dom的元素写上name属性，才会收集。

<script type="text/babel">
        class Login extends React.Component {
   
            handleSubmit=(event)=>{
   
                event.preventDefault();
                alert(`用户姓名:${
     this.username.value},用户密码：${
     this.password.value}`);
            }
            render(){
   
                return (
                    <form onSubmit={
   this.handleSubmit}>
                        用户姓名：<input type='text' name='username' ref={
   c=>this.username=c}/>
                        用户密码：<input type='password' name='password' ref={
   c=>this.password=c}/>
                        <button>提交</button>
                    </form>
                )
            }
        }

        ReactDOM.render(<Login/>,document.getElementById('test'));

        

          
        
        
        

          

          AI 代码解读
        
      
      

3：利用ref，使用的时候采取收集需要的值，就叫非受控组件。