含義

• 非受控組件：表單數據不受控與state的（未綁定value），使用React ref從DOM節點中獲取表單數據的組件
• 提示refs棄用
  

class MyForm extends React.Component {constructor(props) {super(props)}submit = (e) => {e.preventDefault()console.log(this.refs.refName.value)}render() {return (<form onSubmit={this.submit}><div>用戶名：<input type="text" ref="refName" placeholder="用戶名" /></div>{/* onClick={this.submit} */}<div><button type="submit">提交</button></div></form>)} } ReactDOM.render(<MyForm />,document.getElementById('app') )

• 使用hooks React.createRef
• 打印this.refName
  

class MyForm extends React.Component {constructor(props) {super(props)this.refName = React.createRef()this.refGender = React.createRef()this.refIsStu = React.createRef()this.refLans = React.createRef()}submit = (e) => {e.preventDefault()// console.log(this.refs.refName.value)console.log(this.refGender.current.value)}render() {return (<form onSubmit={this.submit}><div>{/* ref="refName" 改用hooks React.createRef */}用戶名：<input type="text" placeholder="用戶名" ref={this.refName} /></div>{/* onClick={this.submit} */}<div>性別：<select ref={this.refGender} defaultValue="male"><option value="female">女</option><option value="male">男</option></select></div><div>{/* radio checkbox不太適用于非受控組件 ref綁定*/}<p>是否學生：是<input type="radio" defaultChecked={true}/>否<input type="radio" /></p><p>掌握語言:粵語<input type="checkbox" />英語<input type="checkbox" defaultChecked={true} /></p></div><div><button type="submit">提交</button></div></form>)} } ReactDOM.render(<MyForm />,document.getElementById('app') )

• 注意：只要使用了value就要綁定onChange事件or設置defaultValue
• defaultValue：form field的默認值，在組件掛載完畢后更新，不會導致DOM的更新
  

總結

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

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