含義

• 受控組件：由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') )

總結

以上是生活随笔為你收集整理的09 受控组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。