react受控組件和非受控組件

這個評論小案例就是總結了受控組件的意思，還有react子父傳參的例子哦,忘記受控組建的小夥伴們可以看看啊

受控的操作順序

• 其值由React控制的輸入表單元素稱爲“受控組件”。
• 受控的操作順序
• 在state裏面設置狀態
• 在表單元素上設置value={狀態}
• 在元素上添加onChange是事件
• 在事件裏面修改狀態

什麼時候使用受控組件？

• 需要對組件的value值進行修改時，使用受控組件。比如：頁面中有一個按鈕，每點擊一次按鈕受控組件的值加1

注意點

• 在受控組件中,如果沒有給輸入框綁定onChange事件,將會受到react的警告
• 並且此時輸入框除了默認值，是無法輸入其他任何參數的

受控表單

   input 表單受控
   type ：      text         value   
   type：      checkbox      checked
   type :       radio       checked
   textarea     select

App.js

import React, { Component } from 'react'
import Top from "./top"
import Comment from "./comment"

import "./style.css"
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list:[],
        };
    }
    render() {
        let {list}=this.state;
        return <div className="wrapper">
            <Top add={(obj) => {
                console.log(obj,"top")
                this.setState({
                    list:[...list,obj]
                },()=>{
                    console.log(this.state.list)
                })
            }} />

  
            <Comment list={this.state.list} />
        </div>
    }
}

export default App;

• top.js

import React, { Component } from 'react'
class Top extends Component {
    constructor(props) {
        super(props);
        this.state = {
            val: "",
            con: "",
        };
    }
    render() {
        let { val, con } = this.state;
        return <div className="top">
            <p><span>用戶名：</span> <input type="text" value={val} name="val" onChange={this.handChange.bind(this)} /></p>
            <div>
                <span>用戶評論</span>
                <textarea name="con" id="" value={con} cols="32" rows="8" onChange={this.handChange.bind(this)}></textarea>
            </div>
            <button onClick={this.handClick.bind(this)} >提交</button>
        </div>
    }
    handChange(e) {
        let target = e.target;
        let name = target.name;
        let val = target.value
        this.setState({
            [name]: val,
        })
    }
    handClick() {
        console.log(this.state)
        let obj = {
            val: this.state.val,
            con: this.state.con,
        }
        console.log(this.state.val, this.state.con)
        this.props.add(obj)
        this.setState({
            val: "",
            con: "",
        })

    }


}

export default Top;

• commen.js

import React, { Component } from 'react'
import List from "./list"
class Comment extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        let {list}=this.props;
        return <div>
             {
                 list && list.map((item,index)=>  <List key={index} val={item.val} con={item.con} />)
             }
        </div>
    }
}
export default Comment;

• list.js

import React, { Component } from 'react'
class List extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        let {val,con}=this.props;
        return <div className="list">
            <span>{val}:</span>
            <span>{con}</span>
        </div>
    }
}

export default List;

• style.css

*{
    margin:0;
    padding:0;
    list-style: none;
}

.wrapper{
     width: 400px;
     height:450px;
    border:1px solid #ccc;
    margin:30px auto;
}
.top p span{
    margin-left: 18px;
}
.top input{
    height:25px;
    width:240px;
    margin-left:10px;
    margin-top:10px;
}
.top textarea{
    margin-left:25px;
    text-indent: 4px;
    margin-top:8px;
}
.top span{
    margin-left:4px;
}
.top button{
    height:35px;
    width: 80px;
    text-align: center;
    line-height: 35px;
    margin-left:70%;
}
.list{
    margin:10px;
    border:1px solid #eee;
   
}
.list span{
    display: inline-block;
    height:30px;
    line-height: 30px;
    margin:0px 5px;
    
}

非受控組件

什麼是非受控組件？

• 表單數據由 DOM 處理的組件非受控組件。

非受控組件有兩個特點：

1. 不設置value值，
2. 通過ref獲取dom節點然後再取value值

<input type="text" placeholder="請輸入姓名" name='username' ref={(input) => this.usernameElem = input}/>
 
取值方法：this.usernameElem.value

什麼時候使用非受控組件？

• 任何時候都不需要改變組件的value值，這時候可以使用非受控組件。

非受控組件兩種方法代碼

 import React, { Component } from 'react'
 class App extends Component {
    constructor() {
        super();
        this.sec=React.createRef();
       
    }
    render() {
        return <div>
          <input defaultValue="123" ref={dom=>this.val=dom} />
          <button onClick={this.handSubmit.bind(this)} ref="button"></button>
           <p><input ref={this.sec}</p>
        </div>     
    }
    handSubmit(e){
		   e.preventDefault();
		   console.log(this.sec.current.value);
		   console.log(this.val.value)
}

export default App;