在React中處理表單

如何在React應用程序中處理表單

表單是默認情況下可交互的少數HTML元素之一。

它們旨在允許用戶與頁面進行交互。

表格的常見用途?

  • 搜索
  • 聯絡表格
  • 購物車結帳
  • 登錄和註冊
  • 和更多!

使用React,我們可以使我們的表單更具交互性,並減少靜態性。

在React中有兩種處理表單的主要方法,它們在根本上有所不同:數據的管理方式。

  • 如果數據是由DOM處理的,我們稱它們為不受控制的組件
  • 如果數據是由組件處理的,我們稱它們為受控組件

可以想像,受控組件是大多數時候使用的組件。組件狀態是事實的唯一來源,而不是DOM。但是有時您會被迫使用非控件組件,例如,當使用某些因其行為而固有地不受控制的表單字段時,例如<input type="file">場地。

當元素狀態在由組件管理的表單字段中更改時,我們使用onChange屬性。

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = { username: '' }
  }

handleChange(event) {}

render() { return ( <form> Username: <input type=“text” value={this.state.username} onChange={this.handleChange} /> </form> ) } }

對於類組件,為了設置新狀態,我們必須綁定thishandleChange方法,否則this無法從該方法內訪問:

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = { username: '' }
    this.handleChange = this.handleChange.bind(this)
  }

handleChange(event) { this.setState({ username: event.target.value }) }

render() { return ( <form> <input type=“text” value={this.state.username} onChange={this.handleChange} /> </form> ) } }

同樣,我們使用onSubmit表單上的屬性以調用handleSubmit提交表單時的方法:

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = { username: '' }
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

handleChange(event) { this.setState({ username: event.target.value }) }

handleSubmit(event) { alert(this.state.username) event.preventDefault() }

render() { return ( <form onSubmit={this.handleSubmit}> <input type=“text” value={this.state.username} onChange={this.handleChange} /> <input type=“submit” value=“Submit” /> </form> ) } }

使用鉤子一切都更加簡單:

const Form = props => {
  const [username, setUsername] = useState()

const handleChangeUsername = e => { setUsername(e.target.value) }

const handleSubmit = event => { alert(username) event.preventDefault() }

render() { return ( <form onSubmit={handleSubmit}> Username: <input type=“text” value={username} onChange={handleChangeUsername} /> </form> ) } }

表格中的驗證可以在handleChange方法:您可以訪問狀態的舊值和新值。您可以檢查新值,如果無效,則拒絕更新後的值(並以某種方式將其傳達給用戶)。

HTML表單不一致。他們有悠久的歷史,這證明了這一點。然而,React使事情對我們來說更加一致,您可以使用它來獲取(和更新)字段value屬性。

這是一個textarea, 例如:

<textarea value={this.state.address} onChange={this.handleChange} />

同樣的select標籤:

<select value="{this.state.age}" onChange="{this.handleChange}">
  <option value="teen">Less than 18</option>
  <option value="adult">18+</option>
</select>

之前我們提到了<input type="file">場地。這有點不同。

在這種情況下,您需要通過分配ref屬性到構造函數中定義的屬性React.createRef(),並使用它在提交處理程序中獲取它的值:

class FileInput extends React.Component {
  constructor(props) {
    super(props)
    this.curriculum = React.createRef()
    this.handleSubmit = this.handleSubmit.bind(this)
  }

handleSubmit(event) { alert(this.curriculum.current.files[0].name) event.preventDefault() }

render() { return ( <form onSubmit={this.handleSubmit}> <input type=“file” ref={this.curriculum} /> <input type=“submit” value=“Submit” /> </form> ) } }

這是不受控制的組件道路。狀態存儲在DOM中,而不是組件狀態中(我們使用了注意this.curriculum訪問上傳的文件,並且沒有觸摸state

我知道您在想什麼-除了這些基礎知識外,還必須有一個庫可以簡化所有表單處理工作,並自動執行驗證,錯誤處理等等,對嗎?有一個偉大的膠體

免費下載我的反應手冊


更多反應教程: