Обработка форм в React

Формы являются одним из немногих HTML-элементов, которые по умолчанию являются интерактивными.

Они были разработаны, чтобы позволить пользователю взаимодействовать со страницей.

Общее использование форм?

• Поиск
• Контактные формы
• Проверка тележек для покупок
• Вход и регистрация
• и даже больше!

Используя React, мы можем сделать наши формы намного более интерактивными и менее статичными.

Существует два основных способа обработки форм в React, которые различаются на фундаментальном уровне: как управляются данные.

• если данные обрабатываются DOM, мы называем их неконтролируемыми компонентами
• если данные обрабатываются компонентами, мы называем их контролируемыми компонентами

Как вы можете себе представить, управляемые компоненты – это то, что вы будете использовать большую часть времени. Состояние компонента является единственным источником истины, а не DOM. Но иногда вы вынуждены использовать неконтролируемые компоненты, например, при использовании некоторых полей формы, которые по своей сути неконтролируемы из-за их поведения, таких как <ввод> поле.

Когда состояние элемента изменяется в поле формы, управляемом компонентом, мы отслеживаем его с помощью атрибута onChange .

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

  handleChange(event) {}

  render() {
    return (
      

        Username:
        
      
    )
  }
}

С компонентами класса, чтобы установить новое состояние, мы должны привязать это к методу handleChange , в противном случае это недоступно из этого метода:

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 (
      

        
      
    )
  }
}

Аналогично, мы используем Атрибут 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 (
      

        
        
      
    )
  }
}

С помощью крючков все намного проще:

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

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

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

  render() {
    return (
      

        Username:
        
      
    )
  }
}

Проверка в форме может быть обработана методом handleChange : у вас есть доступ как к старому значению состояния, так и к новому. Вы можете проверить новое значение и, если оно неверно, отклонить обновленное значение (и каким-то образом сообщить его пользователю).

HTML-формы непоследовательны. У них долгая история, и это видно. Однако React делает все более согласованным для нас, и вы можете получать (и обновлять) поля, используя его значение атрибут.

Вот, например, текстовая область :

То же самое относится и к тегу select :

  Less than 18
  18+

Ранее мы упоминали поле <ввод> . Это работает немного по-другому.

В этом случае вам нужно получить ссылку на поле, присвоив атрибут 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 (
      

        
        
      
    )
  }
}

Это неконтролируемые компоненты способ. Состояние хранится в DOM, а не в состоянии компонента (обратите внимание, что мы использовали этот.учебный план для доступа к загруженному файлу, и не коснулся состояния .

Я знаю, о чем вы думаете – помимо этих основ, должна быть библиотека, которая упрощает всю эту обработку форм и автоматизирует проверку, обработку ошибок и многое другое, верно? Есть отличный вариант, Для Майка .

Оригинал: “https://flaviocopes.com/react-forms/”