react表單

和html同樣, react也提供了許多的可供交互的組件, 這些組件有 input, textarea, option等.

 

react 提供的這些組件與其餘的組件又有一些不一樣, 其餘的組件多數用於展現信息, 而這些組件能夠經過用戶的操做進行交互.

 

那麼input, checked, selected 主要是在哪些地方可使用呢?

1. value, 支持<input> 和 <textarea>兩種組件.

2. checked 支持<input> 類型爲checkbox和radio兩種.

3. select 支持<option>組件.

備註: 與傳統的html不一樣的是, 傳統的<textarea>的值是直接寫在<textarea>的子節點上, 好比:

<textarea>this is textarea value</textarea>

可是react的<textarea>組件的值是寫在它的value屬性上面的, 如:

<textarea value="this is react textarea value" />

他們均可以調用一個共同的方法, 那就是onChange方法, 該方法在value值發生改變時觸發.

 

 

與用戶進行交互, 就是當用戶輸入了值以後, 動態改變state的值, 有兩種方式, 一種是帶有控制器的組件, 一種是沒有控制器的組件, 下面具體講解.

1.有控制器的組件: 

input 或 textarea, option的值直接綁定state

class Main extends Component{
    constructor(props){
        super(props);
        this.state = {
            username : "zhangsan "
        };
        this.handleUsername = this.handleUsername.bind(this);
    }
　　// 處理用戶名輸入
    handleUsername(event){
        this.setState({
            username : event.target.value
        })
    }
    render(){
        return(
            <input value={this.state.username} onChange={this.handleUsername} />
        )
    }
}
export default Main;

在這個例子中, 必須給input添加onChange事件, 由於它的值綁定了this.state.username, 若是不經過setState改變state.username的值的話, 無論如何輸入, input中的內容是不會發生改變的.

 

2. 沒有控制器的組件:

class Main extends Component{
    constructor(props){
        super(props);
        this.state = {
            username : "zhangsan "
        };
        this.handleUsername = this.handleUsername.bind(this);
    }
　　// 處理用戶名輸入
    handleUsername(event){
        this.setState({
            username : event.target.value
        })
    }
    render(){
        return(
            <input defaultValue="haha" onChange={this.handleUsername} />
        )
    }
}
export default Main;

在這個例子裏面, 咱們沒有把state.username直接綁定到input上面, 可是咱們仍是調用了onChange事件, 由於若是咱們不手動改變state.username的值, 雖然輸入框中的內容發生改變了, 可是咱們獲取到的永遠都是設置的默認的"haha"那個值.

 

defaultVaule, defaultChecked 只用於組件的初始化渲染.

 在使用select組件時, 爲了方便操做, select 的value的值等於option的值, 則表示這個選項被選中了.

<select value="B">
  <option value="A">Apple</option>
  <option value="B">Banana</option>
  <option value="C">Cranberry</option>
</select>

select 的值容許是一個數組, 並設置multiple屬性爲true, 則表示多個option被選中:

<select multiple={true} value={["B","C"]}>
  <option value="A">Apple</option>
  <option value="B">Banana</option>
  <option value="C">Cranberry</option>
</select>

 

若是想要手動觸發操做, 就須要給對應的地點多加一個ref熟悉, 經過ref找到對應的節點, 而後觸發對應的操做, 好比,form.submit();

 

class Submit extends Component{
　　constructor(props){
　　　　　super(props);
　　　　　this.handleUsername = this.handleUsername.bind(this);
　　　　　this.submit = this.submit.bind(this);
　　　　　this.state = {
　　　　　　username:""
　　　　　};

　　}
　　handleUsername(event){
　　　　this.setState({
　　　　　　username:event.target.value
　　　　})
　　}
　　// 提交
　　submit(){
　　　　　this.form.submit();
　　}

　　render(){
　　　　return(
　　　　　　<form ref="form">
　　　　　　　　<input type="text" value={this.state.username} onChange={this.handleUsername} />
　　　　　　　　<button onClick={this.submit}>提交</button>
　　　　　　</form>
　　　　)
　　}

}
export default Submit;

　　

 

參考連接: http://reactjs.cn/react/docs/forms.html