React实现Form表单

前言

学无止境，无止境学。坚持每天学点编程知识，坚持每天写点小文章，坚持每天进步一点点。大家好，我是张大鹏，喜欢学习和分享，希望能够通过此公众号，将自己学到的东西分享给大家，和大家一起交流，一起成长，一起进步。

乾坤未定，你我皆是黑马。大鹏一日同风起，扶摇直上九万里。宝剑锋从磨砺出，梅花香自苦寒来。不积跬步，无以至千里，不积小流无以成江海。

如果有多余的时间，就坚持学习吧，小时候学习改变命运，长大了学习丰富内涵，老了学习带来宁静。活到老，学到老，我能行！

概述

《React零基础入门班》收费说明：

时长：10节课

价格：1000元

内容：React从入门到项目实战

上课方式：腾讯会议小班教学

本篇文章是《React零基础入门班》的第7篇文章，前面还有：

《第一个React程序》

《React常用方法》

《React使用JSX开发菜谱应用》

《使用webpack让React模块化》

《React的状态管理》

《React组件事件通知》

基于Ref的表单

目标

1、使用Ref创建input输入框的引用，分别创建title标题和color颜色的引用

2、创建一个FormAddColor组件，返回两个输入框和一个按钮，用于添加颜色名称和对应的颜色十六进制值

3、给按钮添加点击事件，点击的时候获取颜色标题和颜色值

4、接收一个onNewColor的方法作为属性，点击按钮的时候使用该方法向父组件传递title标题和color颜色

5、重置表单的title和color值

实现方案

1、使用Ref创建input输入框的引用，分别创建title标题和color颜色的引用

const title = useRef()

const color = useRef()

2、创建一个FormAddColor组件，返回两个输入框和一个按钮，用于添加颜色名称和对应的颜色十六进制值

添加

3、给按钮添加点击事件，点击的时候获取颜色标题和颜色值

4、接收一个onNewColor的方法作为属性，点击按钮的时候使用该方法向父组件传递title标题和color颜色

// 提取值

const titleValue = title.current.value

const colorValue = color.current.value

console.log("颜色：", titleValue, colorValue)

// 向上提交

onNewColor(titleValue, colorValue)

5、重置表单的title和color值

完整代码

components/FormColor.js

import React, from "react";

export default function FormAddColor() {

// 定义两个引用

const title = useRef()

const color = useRef()

const submit = e => {

// 阻止表单默认行为

e.preventDefault()

// 提取值

const titleValue = title.current.value

const colorValue = color.current.value

console.log("颜色：", titleValue, colorValue)

// 向上提交

onNewColor(titleValue, colorValue)

// 重置

title.current.value = ""

color.current.value = ""

}

return (

添加

)

}

渲染表单

修改App.js

import FormAddColor from "./components/FormColor";

export default function App() {

return

}

测试启动服务进行测试。

基于Hooks的表单

目标

1、定义title和color两个hooks，用于状态管理

2、在两个input中分别绑定title和color，并给对应的onChange事件添加绑定

3、当点击提交按钮的时候提交input的内容并重置

实现方案

1、定义title和color两个hooks，用于状态管理

const [title, setTitle] = useState("")

const [color, setColor] = useState("#000000")

2、在两个input中分别绑定title和color，并给对应的onChange事件添加绑定

value=

onChange=

type="text"

placeholder="颜色名称"

required/>

value=

onChange=

type="color"

required/>

添加

3、当点击提交按钮的时候提交input的内容并重置

const submit = e => {

// 阻止表单默认行为

e.preventDefault()

// 向上提交

console.log("xxx", title, color)

onNewColor(title, color)

// 重置

setTitle("")

setColor("#000000")

}

完整代码

components/FormColor.js

import React, from "react";

export default function FormAddColor() {

const [title, setTitle] = useState("")

const [color, setColor] = useState("#000000")

const submit = e => {

// 阻止表单默认行为

e.preventDefault()

// 向上提交

console.log("xxx", title, color)

onNewColor(title, color)

// 重置

setTitle("")

setColor("#000000")

}

return (

value=

onChange=

type="text"

placeholder="颜色名称"

required/>

value=

onChange=

type="color"

required/>

添加

)

}

自定义Hooks

目标

1、自定义一个useInput钩子，用于生成input输入框的属性和重置方法

2、在FormColor组件中使用该钩子简化代码

完整代码

components/hooks.js

import from "react";

export const useInput = initialValue=>{

const [value,setValue] = useState(initialValue)

return [

,

()=>setValue(initialValue)

]

}

components/FormColor.js

import React from "react";

import from "./hooks";

export default function FormAddColor() {

const [titleProps, resetTitle] = useInput("")

const [colorProps, resetColor] = useInput("#000000")

const submit = e => {

// 阻止表单默认行为

e.preventDefault()

// 向上提交

console.log("xxx", titleProps.value, colorProps.value)

onNewColor(titleProps.value, colorProps.value)

// 重置

resetTitle()

resetColor()

}

return (

{...titleProps}

type="text"

placeholder="颜色名称"

required/>

{...colorProps}

type="color"

required/>

添加

)

}

将添加颜色组件整合

目标

1、将添加颜色的组件整合到之前的颜色列表项目中

2、当添加了一种新的颜色以后，重新渲染页面

实现方案

{

const newColors = [

...colors,

{

id: v4(),

rating: 0,

title,

color

}

]

setColors(newColors)

}}/>

完整代码

App.js

import from 'react';

import colorData from './data/color.json';

import ColorList from './components/ColorList';

import FormAddColor from "./components/FormColor";

import from "uuid";

export default function App() {

const [colors, setColors] = useState(colorData)

return (

{

const newColors = [

...colors,

{

id: v4(),

rating: 0,

title,

color

}

]

setColors(newColors)

}}/>

{

const newColors = colors.map(color => color.id === id ? {...color, rating} : color)

console.log("222", newColors)

setColors(newColors)

}}/>

)

}

总结