含义

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

class App extends React.Component {// 1. state是表单的唯一数据源state = {name: ''}handleChange = (e) => {// 2. 控制表单操作并同步statethis.setState({name: e.target.value}, () => {console.log('修改name', this.state.name)})}render() {const { name } = this.statereturn (<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. 控制表单操作并同步statethis.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.statereturn (<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}:<inputtype="checkbox"name="languages"checked={languages.includes(value)}value={value}onChange={this.handleCheckboxChange} />{lanConf.length - 1 != index ? "|" : ""}</span>)})}</div><div><textareavalue={intro}name="intro"onChange={this.handleChange}placeholder="说明"/></div><div><button onClick={this.submit}>提交</button></div></form></div >)}
}
ReactDOM.render(<App />,document.getElementById('app')
)