Хотите узнать, как легко и просто создавать формы с помощью React.js? Что ж, в этой статье я проведу вас через пошаговый процесс создания форм React и использую «новый блог» в качестве примера.
Шаг 1. Структура формы
import React from 'react';
class NewBlogForm extends React.Component {
render(){
return (
<div>
<form>
<input type='' name=''/>
<textarea type='' name=''/>
<input type="submit"/>
</form>
</div>
);
}
}
export default NewBlogForm;
Базовая структура формы React включает в себя два тега input, один из которых имеет тип submit, и тег atextarea. Вам нужно отслеживать две части данных в этой форме: заголовок и содержание.
Шаг 2. Состояние, теги значений и onChange.
import React from 'react';
class NewBlogForm extends React.Component {
state={
title: '',
content: ''
}
render(){
return (
<div>
<form>
<input type='text' name='title' value={this.state.title} onChange={this.changeHandler}/>
<textarea type='text' name='content' value ={this.state.content} onChange={this.changeHandler}/>
<input type="submit"/>
</form>
</div>
);
}
}
export default NewBlogForm;
После addstate, экземпляр класса компонентов React, который отслеживает данные, title и content. Элементы формы input и textarea поддерживают и обновляют свои собственные state. Я добавил name и value, что указывает на значение titleи content в state. Это позволяет React полностью контролировать ввод и текстовую область. Чтобы обновить его, для обоих этих входных данных потребуется метод onChange, который получает обратный вызов с именем changeHandler.
Шаг 3: при изменении
import React from 'react';
class NewBlogForm extends React.Component {
state={
title: '',
content: ''
}
changeHandler=(event)=>{
this.setState({[event.target.name]: event.target.value})
}
render(){
return (
<div>
<form>
<input type='text' name='title' value={this.state.title} onChange={this.changeHandler}/>
<textarea type='text' name='content' value={this.state.content} onChange={this.changeHandler}/>
<input type="submit"/>
</form>
</div>
);
}
}
export default NewBlogForm;
Далее нужно вызвать и найти функцию changeHandler. changeHandler принимает event в качестве параметра; использует setState для обновления файла state. setState принимает объект и ключ, name который указывает на ключ в state. В этом случае вы получаете value из ввода event. По сути, вы получаете новые данные из event, независимо от того, что value находится в этих данных, обновите их в файле state.
Шаг 3. Кнопка отправки
import React from 'react';
class NewBlogForm extends React.Component {
state = {
title: '',
content: ''
}
changeHandler = (event) => {
this.setState({[event.target.name]: event.target.value})
}
handleSubmit = (event) => {
event.preventDefault()
}
render(){
return (
<div>
<form onSubmit = {this.handleSubmit}>
<input type ='text' name ='title' value ={this.state.title} onChange = {this.changeHandler}/>
<textarea type='text' name='content' value={this.state.content} onChange = {this.changeHandler}/>
<input type = "submit"/>
</form>
</div>
);
}
}
export default NewBlogForm;
Затем добавьте onSubmit для отправки формы и назначьте его this.handleSubmit. Один из вариантов — реализовать всю логику внутри этого класса и отправить ее родительскому компоненту. Как и в случае с JavaScript, вы должны включить event.preventDefault(), потому что запросы обычно получаются, а не отправляются.
Шаг 4. Данные блога
import React from 'react';
import './newBlog.css';
import newForm from './newForm'
class App extends React.Component {
state = {
blogs = ''
}
handleNewBlog = (blogData)=>{
const blogObj = {
...blogData,
}
this.setState({blogs: [...this.state.blogs, blogObj]})
}
render() {
return (
<div>
<NewBlogForm onNewBlog={this.handleNewBlog} />
</div>
);
}
}
export default App;
Затем вам нужно перейти к родительскому компоненту, где вы определяете компонент NewBlogForm. Внутри тега передайте onNewBlog, когда будет создан новый блог, запустите атрибуты, вызывающие функцию, this.handleNewBlog. Внешний рендер создайте функцию, определяющую, как вы хотите, чтобы handleNewBlog вел себя, которая будет передавать данные блога в onNewBlog. Здесь передайте blogData (название и содержание) и внутри const распространите данные в объект. Каждый раз, когда вы обрабатываете новый блог, создавайте объект блога и возвращайте новый массив со всеми блогами (распределенными); у вас уже есть массив с новым объектом блога, который вы добавляете.
Шаг 5. Заполните форму отправки
import React from 'react';
class NewBlogForm extends React.Component {
state={
title: '',
content: ''
}
changeHandler=(event)=>{
this.setState({[event.target.name]: event.target.value})
}
handleSubmit=(event)=>{
event.preventDefault()
this.props.onNewBlog(this.state)
}
render(){
return (
<div>
<form onSubmit={this.handleSubmit}>
<input type='text' name='title' value={this.state.title} onChange={this.changeHandler}/>
<textarea type='text' name='content' value={this.state.content} onChange={this.changeHandler}/>
<input type="submit"/>
</form>
</div>
);
}
}
export default NewBlogForm;
Наконец, вызовите onNewBlog внутри класса NewBlogForm и handleSubmit передайте его, используя props; вернуть данные о заголовке и содержании черезstate.
Вывод
Этот процесс позволяет React контролировать работу входных данных. Всякий раз, когда вы получаете информацию от React, и если она динамическая, отслеживайте ее с помощью state. Каждый раз, когда ввод изменяется, обновляйте состояние, React будет использовать данное значение для его визуализации; это контролируемый ввод в контролируемой форме.
Предыдущие сообщения:
Как решить вопрос интервью по обнаружению петель? | Crack The Coding Interview (6-е издание)
Markdown — более простой и быстрый в изучении язык разметки
Структура данных — связанный список| ПРАКТИКА ОДНОСвязных списков (LeetCode)
Отладка кода JS с помощью вкладки DevTool Network
