React中表單使用詳解

這次帶給大家React中表單使用詳解，React中表單使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

表單

React 是單向資料流的框架，所以在表單元素與其它 DOM 元素有所不同，而且和雙向綁定的框架在操作上也有很大不一樣。所以在這裡單獨拿出來說。

輸入受控

import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            text: 'Hello React'
        }
    }
    render(){
        return (
            <p>
                <p><label>写死value-锁定状态</label><input type="text" value="hello react"/></p>
                <p><label>动态value-锁定状态</label><input type="text" value={this.state.text}/></p>
                <p><label>不指定value-没锁状态</label><input type="text"/></p>
            </p>
        )        
    }
}
ReactDOM.render(<Component1 />, document.getElementById('p1'));

這個案例說明了在React 在表單元素因單向資料流所以在value 給定後就無法再修改，所以需要配合<a href="http://www.php.cn/wiki/1464.html" target="_blank"> onChange</a> 事件來完成。所以上面的案例應該是這樣的

class Component1 extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            text: 'Hello React'
        }
    }
    change = (e) => {
        this.setState({text: e.target.value})
    }
    render(){
        return (
            <p>
                <p><label>写死value-锁定状态</label><input type="text" value="hello react" onChange={this.change}/></p>
                <p><label>动态value-没锁状态</label><input type="text" value={this.state.text} onChange={this.change}/></p>
                <p><label>不指定value-没锁状态</label><input type="text"/></p>
            </p>
        )        
    }
}

效果預覽

textarea 元素

在普通HTML 中，textarea 元素是節點文字值

<textarea>
  Hello there, this is some text in a text area
</textarea>

但在React 中，該元素需要使用value 屬性。

class Component1 extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            text: 'Hello React'
        }
    }
    change = (e) => {
        this.setState({text: e.target.value})
    }
    render(){
        return (
            <p>
                <textarea value={this.state.text} onChange={this.change}/>
            </p>
        )        
    }
}

select 元素

在普通HTML 中，select元素要指定預設選取值，就得在對應的option中加上屬性selected

<select>
    <option value="grapefruit">Grapefruit</option>
    <option value="lime">Lime</option>
    <option selected value="coconut">Coconut</option>
    <option value="mango">Mango</option>
</select>

但在React 中，只需要給定屬性value即可

class Component1 extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            text: 'lime'
        }
    }
    change = (e) => {
        this.setState({text: e.target.value})
    }
    render(){
        return (
            <p>
                <select value={this.state.text} onChange={this.change}>
                    <option value="grapefruit">Grapefruit</option>
                    <option value="lime">Lime</option>
                    <option value="coconut">Coconut</option>
                    <option value="mango">Mango</option>
                </select>                
            </p>
        )        
    }
}

input file 元素

#因為<input type="file">是特殊的元素，它是唯讀的，所以在React 中需要用ref來進行特殊處理

class Component1 extends React.Component{
    submit = (e) => {
        console.log(this.file.files)
    }
    render(){
        return (
            <p>
                <input type=&#39;file&#39; ref={input => {this.file = input}}/>
                <input type="button" value="submit" onClick={this.submit} />
            </p>
        )        
    }
}

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

react實作選取li高亮步驟詳解

JS中的JSON和Math使用案例分析

#

以上是React中表單使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！