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 React.Component {
    // 1. state是表单的唯一数据源
    state = {
        name: 'Stephy',
        psw: '',
        intro: '',
        gender: 'female',
        isStu: true,
        languages: ['Cantonese', 'Tagalog', 'English']
    }
    handleChange = (e) => {
        // 2. 控制表单操作并同步state
        this.setState({
            [e.target.name]: e.target.value
        }, () => {
            console.log(`修改${e.target.name}`, this.state[e.target.name])
        })
    }
    handleRadioChange = (value, e) => {
        // e在最后！！
        this.setState({
            [e.target.name]: value
        }, () => {
            console.log(`修改radio`, this.state[e.target.name])
        })
    }
    handleCheckboxChange = (e) => {
        const name = e.target.name,
            value = e.target.value,
            list = JSON.parse(JSON.stringify(this.state[name]));
        let setList = []
        // 如果已存在，应该反选
        if (list.includes(value)) {
            setList = list.filter(val => val != value)
        } else {
            setList = [...new Set([...this.state[name], value])]
        }
        // 以上也可以这么判断 根据e.target.checked来判断勾选、反选
        this.setState({
            [name]: setList
        }, () => {
            console.log(`修改checkbox`, this.state[e.target.name])
        })
    }
    submit = (e) => {
        // 阻止表单提交默认事件（刷新页面）
        e.preventDefault()
        console.log('提交', this.state)
    }
    render() {
        const { name, psw, intro, gender, isStu, languages } = this.state
        return (
            <div>
                <form>
                    <div>
                        <span>用户名：</span>
                        <input type="text"
                            value={name}
                            name="name"
                            onChange={this.handleChange}
                            placeholder="用户名"
                        />
                    </div>
                    <div>
                        <span>密码：</span>
                        <input type="password"
                            value={psw}
                            name="psw"
                            onChange={this.handleChange}
                            placeholder="密码"
                        />
                    </div>
                    <div>
                        <span>性别：</span>
                        <select name="gender" value={gender} onChange={this.handleChange}>
                            <option value="female">女</option>
                            <option value="male">男</option>
                        </select>
                    </div>
                    <div>
                        {/* radio设置同样的name 才可变为单选 */}
                        是否学生：
                        是 <input type="radio" name="isStu" checked={isStu} onChange={this.handleRadioChange.bind(this, true)} />
                        |
                        否 <input type="radio" name="isStu" checked={!isStu} onChange={this.handleRadioChange.bind(this, false)} />
                    </div>
                    <div>
                        {
                            lanConf.map(({ label, value }, index) => {
                                return (
                                    <span key={index}>
                                        {label}:
                                        <input
                                            type="checkbox"
                                            name="languages"
                                            checked={languages.includes(value)}
                                            value={value}
                                            onChange={this.handleCheckboxChange} />
                                        {lanConf.length - 1 != index ? "|" : ""}
                                    </span>
                                )
                            })
                        }
                    </div>
                    <div>
                        <textarea
                            value={intro}
                            name="intro"
                            onChange={this.handleChange}
                            placeholder="说明"
                        />
                    </div>
                    <div>
                        <button onClick={this.submit}>提交</button>
                    </div>
                </form>
            </div >
        )
    }
}
ReactDOM.render(
    <App />,
    document.getElementById('app')
)