09 受控组件

含义

• 受控组件：由state来决定表单内部的数据，由表单的事件处理函数来更改state的方式

class App extends React.Component {
   
    // 1. state是表单的唯一数据源
    state = {
   
        name: ''
    }
    handleChange = (e) => {
   
        // 2. 控制表单操作并同步state
        this.setState({
   
            name: e.target.value
        }, () => {
   
            console.log('修改name', this.state.name)
        })
    }
    render() {
   
        const {
    name } = this.state
        return (
            <div>
                <p>用户名：</p>
                <input type="text"
                    value={
   name}
                    onChange={
   this.handleChange}
                />
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.getElementById('app')

• 完整表单

const lanConf = [
    {
   
        label: '粤语',
        value: 'Cantonese'
    },
    {
   
        label: '菲律宾语',
        value: 'Tagalog'
    },
    {
   
        label: '英语',
        value: 'English'
    },
    {
   
        label: '闽南语',
        value: 'Fukienese'
    },

]
class App extends