DK_Lan
DK_Lan

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 (
            

                

                

                

            

        )        
    }
}

ReactDOM.render(, document.getElementById('div1'));

这个案例说明了在 React 在表单元素因单向数据流所以在 value 给定后就无法再次修改，所以需要配合 onChange 事件来完成。所以上面的案例应该是这样的

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

                

                

                

            

        )        
    }
}

效果预览

textarea 元素

在普通 HTML 中，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 (