react form表单 input和textarea用法

在 HTML 中，表单元素如 ， 和 表单元素通常保持自己的状态，并根据用户输入进行更新。而在 React 中，可变状态一般保存在组件的 state(状态) 属性中，并且只能通过 setState() 更新
我们可以通过使 React 的 state 成为 “单一数据源原则” 来结合这两个形式。然后渲染表单的 React 组件也可以控制在用户输入之后的行为。这种形式，其值由 React 控制的输入表单元素称为“受控组件”

import React,{Component} from 'react';
import ReactDOM from 'react-dom';


class App extends Component {
    constructor(props) {
        super(props)
        //绑定函数
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleTextareaChange = this.handleTextareaChange.bind(this);
        //状态值
        this.state = {
            inputValue:'',
            textareaValue:''
        }
    }
    //设置inputValue
    handleInputChange(e){
        this.setState({
            inputValue:e.target.value
        });
    }
   //设置textareaValue
    handleTextareaChange(e){
        this.setState({
            textareaValue:e.target.value
        })
    }

    render(){
        const {inputValue,textareaValue} = this.state;

        return (
            <div>
                <p>单行输入框：<input type="text" value={inputValue}
                    onChange={this.handleInputChange}
                /></p>
                <p>多行输入框：<textarea value={textareaValue} onChange={this.handleTextareaChange}/></p>
            </div>
        )
    }
}

ReactDOM.render(
    <App/>,
    document.getElementById('app')

)