<input id="name" type="text" value={this.state.name} onChange={this.getValues} />
如果表单数据比较多10个参数这样一个一个的获取就会比较麻烦，那么通过antd的Ui插件就可以轻松实现，类似与实现serialize() 表单序列化。
基本上做react项目的人大部分都会用到Antd 的UI框架。所以，我再总结一下单独使用。
看个效果图
代码实现，引用到的组件有：
import React, {Component} from 'react';
import {Form, Input, Button, Radio, Upload, Icon, message} from 'antd';
const FormItem = Form.Item;
const {TextArea} = Input;
const SeoCreateForm = Form.create()(
(props) => {
const {form} = props;
const {getFieldDecorator} = form;
const saveFormData = () => {
form.validateFields((err, values) => {
if (err) {
return;
console.table(values);
// 在这里执行保存到服务器的操作使用axios
message.success('保存成功！')
return (
<div className="new-wrap">
<Form layout='vertical'>
<FormItem
labelCol={{span: 2}}
wrapperCol={{span: 12}}
label="网站标题：">
{getFieldDecorator('webName', {
rules: [{required: true, message: '请填写网站的标题'}],
<Input placeholder="请准确填写网站的标题"/>
</FormItem>
<FormItem
labelCol={{span: 2}}
wrapperCol={{span: 12}}
label="关键词："
{getFieldDecorator('keywords', {
rules: [{required: true, message: '请填写网站的标题'}],
<Input placeholder="请准确填写网站被搜索时的关键词以逗号分隔"/>
</FormItem>
<FormItem
labelCol={{span: 2}}
wrapperCol={{span: 12}}
label="站长统计："
{getFieldDecorator('friendshop')(
<TextArea rows={3} placeholder="请将百度统计或站长统计的数据统计所用代码复制/粘贴进来"/>
</FormItem>
<Button type="primary" onClick={saveFormData}>保存</Button>
</Form>
class SeoBetter extends Component {
render() {
return (
<SeoCreateForm/>
export default SeoBetter;
稍微解释一下：这里必须通过Form.create() 来创建表单组件，因为要用到antd已经封装好的form.validateFields() 函数来获取表单数据。
只需要给button 添加点击事件，获取数据就可以了。
如果看不明白就看这里的api参数说明比较易懂。 antd-Form.create()
在react中获取表单数据方式比较多，可以就通过监听inputvalue的oncChange 动态修改state里面对应的参数值。&lt;input id="name" type="text" value={this.state.name} onChange={this.getValues} /&gt; &lt;br /&gt;如果表单数据比较多10个参数这样一个一个的...
今天在写页面的时候发现一个问题，就是在React Router中使用了Url传参的功能，像这样:
export class MainRouter extends React.Component {
render() {
return (
<BrowserRouter>
<Switch>
<Route path={ component={ChannelPerPage}/>
</Switch>
在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。
yarn build
构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。
生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！
有关更多信息，请参见关于的部分。
yarn eject
注意：这是单向操作。 eject ，您将无法返回！
如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。
相反，它将所有配置文件和传递性依赖项（webpa
在日常的开发中，从服务器端异步获取数据并渲染是相当高频的操作。在以往使用React Class组件的时候，这种操作我们已经很熟悉了，即在Class组件的componentDidMount中通过ajax来获取数据并setState，触发组件更新。
随着Hook的到来，我们可以在一些场景中使用Hook的写法来替代Class的写法。但是Hook中没有setState、componentDidMount等函数，又如何做到从服务器端异步获取数据并渲染呢？本文将会介绍如何使用React的新特性Hook来编写组件并获取数据渲染。
数据渲染
先来看一个数据渲染的简单demo
import Reac
React香草形式
遵循以下标准的简单表单序列化器和验证器。
Vanilla Form是基于标准的表单序列化和验证组件。 要获取序列化的表单数据，您唯一需要做的就是遵循标准输入接口声明表单控件（本机或自定义！）：使用name ， value ， htmlFor和role属性。
将onSubmit到Form组件，以从表单获取序列化的数据。 通过validations以显示和捕获表单中的错误。 使用onChange （或不使用onChange ）获取实时数据更新。
import Form from 'react-vanilla-form'
< Form onSubmit = { data => console . log ( data ) } >
< label xss=removed>
< / label >
< input type = "
最近一直在看
react，项目中一直用的是vue突然发现vue之所以火得那么快是有原因的，双向
数据绑定，语法简洁通俗易懂，感觉有一定经验的开发就可以直接看文档上手，
react 的jsx适合资深开发，很灵活，但是好多东西都要自己去
实现，总之都各自有自己的优缺点吧。
运行效果如下：
包括了表单里input radio select checkbox textarea form 等一些操作，
import React,{Component} from 'react';
class Reactform extends Component {
constructor(props) {
super(props);
this.s...
在
React Single Page Applications中在
页面加载
时获取数据并不容易。
您必须设置加载状态，使用组件生命周期方法进行
获取，同
时确保当用户在应用程序中浏览
时不会过于频繁（或不够）
获取数据。
结果是易于出错的
实现，您必须仔细考虑才能正确（并且不必这样做）！
这个库解决了这个问题。
React Fetch Flow是一个高阶组件（HOC），中间件和一个简
单的reducer，负责处理或设置加载状态，客户端路由行为（与加载有关）和
数据获取。
它遵循一种使用户
实现简
单直观的理念。 这种哲学是用户在整个应用程序中导航
时需要最新的
数据，而不必
刷新页面，除非他们明确声明（例如，用户按回去）。 因此，每当它们推送到浏览器历史记录
时，
react-fetch-flow将
获取数据并设置加载状态，而没有其他
时间。
1.form表单中只有一个input标签,按回车键将自动提交表单
当form表单中只有一个<input type=”text” name=’name’ />时按回车键将会自动将表单提交。
<form id='form1' action='a1.jsp' method='post'>
<input type='text' name='name' />
</form>
如果不想让其自动提交可以这样做:
再添加一个<input type=”text”/>按下回车将不会自动提交，但是页面上显示一个不知所云的输入框挺别扭，后从网上搜到两个解决办法：
(1) 添加一个<input type=’text’
由于axios默认发送数据时，数据格式是Request Payload，而并非我们常用的Form Data格式，PHP后端未必能正常获取到，所以在发送之前，需要使用qs模块对其进行处理。
//qs是内置的模块，不需要安装
import qs from 'qs';
//对表单数据进行编码，数据以键值对在http请求体重发送给服务器
headers:{'Content-Type':'application/x-www-form-urlencoded'},
//qs.stringify转换为表单查询
import
React, { Component } from '
react'
import './from.css'
class Parent extends Component {
aihao = [
name: "唱歌",
value: "sing",
ischecked: ...
可以使用 fetch 或 axios 等库来调用接口，将
数据获取到后，可以使用
React 的 state 或 props 来传递
数据到
页面中进行展示。具体
实现可以参考以下代码：
import
React, { useState, useEffect } from '
react';
import axios from 'axios';
function App() {
const [data, setData] = useState([]);
useEffect(() => {
axios.get('/api/data')
.then(response => {
setData(response.data);
.catch(error => {
console.log(error);
}, []);
return (
{data.map(item => (
<div key={item.id}>
<h2>{item.title}</h2>
<p>{item.content}</p>
export default App;
其中，`axios.get('/api/data')` 是调用接口的代码，`setData(response.data)` 将
获取到的
数据存储到 state 中，`data.map()` 用来遍历
数据并展示到
页面中。
