antd，reactjs，nodejs，ajax實(shí)現(xiàn)重名驗(yàn)證，下拉框3級(jí)聯(lián)動(dòng)效果，聯(lián)級(jí)選擇【詩書畫唱】
前言：
坐了幾乎一下午，一動(dòng)不動(dòng)地從下午1點(diǎn)寫到晚上8點(diǎn)左右，幾乎沒有動(dòng)過坐的位置，有時(shí)很佩服自己的耐心和毅力，我專欄還是很用心寫的，求三連！只點(diǎn)贊和收藏也可以??！我正在各方面不斷自我改進(jìn)和進(jìn)化中......
單詞：
cascade
目錄：
例子
例子1：在Vscode中使用antd中的組件的方法（以表單組件舉例）
滑動(dòng)到該組件展示網(wǎng)頁的最后面或直接CTRL+F搜索“API”關(guān)鍵字，之后查看API，含有說明的內(nèi)容，方便我們使用
一般可改的是label，message的部分，name等的部分一般不改
FormZuJian.js
個(gè)人習(xí)慣寫注釋文件
index.js
例子2：reactjs+nodejs ajax實(shí)現(xiàn)重名驗(yàn)證，在例子1的基礎(chǔ)上實(shí)現(xiàn)后（myapp_servlet_data）ajax傳數(shù)據(jù)到http://localhost:6666這個(gè)網(wǎng)頁，前臺(tái)（myapp）接收數(shù)據(jù)，進(jìn)行重名驗(yàn)證（暫時(shí)不連接數(shù)據(jù)庫，以后連接數(shù)據(jù)庫）
FormZuJian.js
index.js
serv2.js
重名驗(yàn)證用于注冊(cè)，所以這里的代碼中的提交按鈕的"登錄"文本建議讀者們使用時(shí)更改成"注冊(cè)"
例子3：reactjs+nodejs ajax實(shí)現(xiàn)省份城市縣的下拉框聯(lián)動(dòng)效果，下拉框默認(rèn)選中，使用antd。
可以把別人寫好的3級(jí)聯(lián)動(dòng)組件化
Cascade.js
index.js
serv3.js
下拉框默認(rèn)選中其實(shí)很容易，我HBuilder中寫好的下拉框默認(rèn)選擇的組件，直接寫到VScode中，成為組件，和上面一樣的調(diào)用就可以了，如果想用Ajax，就把寫死的數(shù)據(jù)改寫成Ajax的部分的Mydata等等。
例子4：用onInput事件，ref和innerHTML實(shí)現(xiàn)的更好且更簡(jiǎn)潔的重名驗(yàn)證
ChongMingYanZheng.js
index.js
serv2.js（見例2）
例子
例子1：在Vscode中使用antd中的組件的方法（以表單組件舉例）
自己選一個(gè)組件
自己在自己創(chuàng)建的自己命名的comp文件夾下創(chuàng)建自己命名的FormZuJian.js文件，也就是寫組件相關(guān)的內(nèi)容，自己把從Ant Design（個(gè)人習(xí)慣將Ant Design簡(jiǎn)稱為antd）中復(fù)制的代碼拷貝到FormZuJian.js文件中，自己進(jìn)行如下的改寫（注釋和添加內(nèi)容）。
//用來使用Reactjs的React模塊——>?
import React from 'react';?
//npm install jquery --save?
//用來寫Ajax的jquery模塊——>?
import $ from 'jquery';?
//我添加的代碼 END
//自定義組件
class FormZuJian extends React.Component {
? render(){
? ? return <Demo />;
? ? ? ? ? ? ?
? ? ? ? ? ? }
}
//我添加的代碼 END
//我添加的代碼——>
export default FormZuJian;
自動(dòng)跳轉(zhuǎn)到顯示組件效果的網(wǎng)頁：
滑動(dòng)到該組件展示網(wǎng)頁的最后面或直接CTRL+F搜索“API”關(guān)鍵字，之后查看API，含有說明的內(nèi)容，方便我們使用
一般可改的是label，message的部分，name等的部分一般不改
FormZuJian.js
import?{?Form,?Input,?Button,?Checkbox?}?from?'antd';
//我添加的代碼?START
//用來使用Reactjs的React模塊——>
import?React?from?'react';
//npm?install?jquery?--save
//用來寫Ajax的jquery模塊——>
import?$?from?'jquery';
//我添加的代碼?END
const?layout?=?{
??labelCol:?{
????span:?8,
??},
??wrapperCol:?{
????span:?16,
??},
};
const?tailLayout?=?{
??wrapperCol:?{
????offset:?8,
????span:?16,
??},
};
const?Demo?=?()?=>?{
??const?onFinish?=?(values)?=>?{
????console.log('Success:',?values);
??};
??const?onFinishFailed?=?(errorInfo)?=>?{
????console.log('Failed:',?errorInfo);
??};
??return?(
????<Form
??????{...layout}
??????name="basic"
??????initialValues={{
????????remember:?true,
??????}}
??????onFinish={onFinish}
??????onFinishFailed={onFinishFailed}
????>
??????<Form.Item
????????label="用戶名"
????????name="username"
????????rules={[
??????????{
????????????required:?true,
????????????message:?'請(qǐng)輸入你的用戶名!',
??????????},
????????]}
??????>
????????<Input?/>
??????</Form.Item>
??????<Form.Item
????????label="密碼"
????????name="password"
????????rules={[
??????????{
????????????required:?true,
????????????message:?'請(qǐng)輸入你的密碼!',
??????????},
????????]}
??????>
????????<Input.Password?/>
??????</Form.Item>
??????<Form.Item?{...tailLayout}?name="remember"?valuePropName="checked">
????????<Checkbox>記住我</Checkbox>
??????</Form.Item>
??????<Form.Item?{...tailLayout}>
????????<Button?type="primary"?htmlType="submit">
?????????登錄
????????</Button>
??????</Form.Item>
????</Form>
??);
};
//我添加的代碼?START
//自定義組件
class?FormZuJian?extends?React.Component?{
??render(){
????return?<Demo?/>;
??????????????
????????????}
}
//我添加的代碼?END
//我添加的代碼——>
export?default?FormZuJian;
//antd中的源碼——>
//?ReactDOM.render(<Demo?/>,?mountNode);
index.js
/******************/
//目錄——>
//?reactjs必備源碼部分
//?個(gè)人添加的導(dǎo)入antd.css的代碼部分
//?個(gè)人添加的導(dǎo)入組件的代碼部分
//?個(gè)人科普——>
//?個(gè)人注釋：Dg是表格組件
//?FormZuJian.js是表單組件
//個(gè)人總結(jié)的導(dǎo)入代碼模板：import?自定義文件別名（一般我習(xí)慣和導(dǎo)入文件名統(tǒng)一）?from??文件路徑;
/******************/
//reactjs必備源碼部分?START?
import?React?from?'react';
import?ReactDOM?from?'react-dom';
import?'./index.css';
//reactjs必備源碼部分?END
//（Router是要自己寫的路由的部分，暫時(shí)我不寫和不用導(dǎo)入）?START?
//?import?Router?from?'./comp/Router';
//（Router是要自己寫的路由的部分，暫時(shí)我不寫和不用導(dǎo)入）?END
//個(gè)人添加的導(dǎo)入antd.css的代碼部分?START
import?'antd/dist/antd.css';
//個(gè)人添加的導(dǎo)入antd.css的代碼部分?END
//個(gè)人添加的導(dǎo)入組件的代碼部分?START
import?MyTable?from?'./comp/MyTable';
import?Dg?from?'./comp/Dg';
import?FormZuJian?from?'./comp/FormZuJian';
//個(gè)人添加的導(dǎo)入組件的代碼部分?END
import?reportWebVitals?from?'./reportWebVitals';
ReactDOM.render(
??<FormZuJian?/>,
??document.getElementById('root')
);
//?If?you?want?to?start?measuring?performance?in?your?app,?pass?a?function
//?to?log?results?(for?example:?reportWebVitals(console.log))
//?or?send?to?an?analytics?endpoint.?Learn?more:?https://bit.ly/CRA-vitals
reportWebVitals();
例子2：reactjs+nodejs ajax實(shí)現(xiàn)重名驗(yàn)證，在例子1的基礎(chǔ)上實(shí)現(xiàn)后（myapp_servlet_data）ajax傳數(shù)據(jù)到http://localhost:6666這個(gè)網(wǎng)頁，前臺(tái)（myapp）接收數(shù)據(jù)，進(jìn)行重名驗(yàn)證（暫時(shí)不連接數(shù)據(jù)庫，以后連接數(shù)據(jù)庫）
Success: {username: "詩書畫唱", password: "11", remember: true}
遇到的報(bào)錯(cuò)：
Error: Objects are not valid as a React child (found: object with keys {name, pwd}). If you meant to render a collection of children, use an array instead.
錯(cuò)誤:對(duì)象作為反應(yīng)子對(duì)象無效(找到:鍵為{name，pwd}的對(duì)象)。如果您打算呈現(xiàn)一個(gè)子集合，請(qǐng)改用數(shù)組。
先嘗試在成功例子的表單中打印獲取的數(shù)據(jù)：
例子2做了如下的改動(dòng)，其余和例子1一樣：
把data的內(nèi)容改變了
突然發(fā)現(xiàn)從VScode中可以下載的一些插件還挺有用的
運(yùn)行方法
FormZuJian.js
import?{?Form,?Input,?Button,?Checkbox?}?from?'antd';
//我添加的代碼?START
//用來使用Reactjs的React模塊——>
import?React?from?'react';
//npm?install?jquery?--save
//用來寫Ajax的jquery模塊——>
import?$?from?'jquery';
//我添加的代碼?END
const?layout?=?{
??labelCol:?{
????span:?8,
??},
??wrapperCol:?{
????span:?16,
??},
};
const?tailLayout?=?{
??wrapperCol:?{
????offset:?8,
????span:?16,
??},
};
const?Demo?=?()?=>?{
??const?onFinish?=?(values)?=>?{
????console.log('Success:',?values);
????//自己加入的代碼?START
????//自己寫過的錯(cuò)誤代碼：?console.log(this.state.myData);
????$.ajax({
??????url:?'http://localhost:8777/?callback=?',
??????type:?'POST',
??????dataType:?'jsonp',
??????success:?(data)?=>?{
????????//?this.setState({
????????//?????myData:?data
????????//?});
????????let?i?=?1;
????????console.log(data)
????????data.map(o?=>?{
??????????console.log("使用map遍歷處理的data中的name的值："?+?o.name);
??????????if?(o.name?==?values.username)?{
????????????i?=?i?*?0;
??????????}
??????????else?if?(o.name?!=?values.username)?{
????????????i?=?i?*?3;
??????????}
????????});
????????console.log('輸入的用戶名是'?+?values.username);
????????console.log('輸入的用戶密碼是'?+?values.password);
????????console.log('是否記?。?#39;?+?values.remember);
????????//?if(?values.username==data.name){
????????//???console.log('重名驗(yàn)證的結(jié)果是:你已經(jīng)重名了');
????????//?}
????????//?if(?values.username!=data.name){
????????//???console.log('重名驗(yàn)證的結(jié)果是:你沒有重名');
????????//?}
????????console.log('i的值是'?+?i);
????????if?(i?==?0)?{
??????????alert('重名驗(yàn)證的結(jié)果是:你已經(jīng)重名了');
??????????console.log('重名驗(yàn)證的結(jié)果是:你已經(jīng)重名了');
????????}
????????if?(i?%?3?==?0?&&?i?!=?0)?{
??????????alert('重名驗(yàn)證的結(jié)果是:你沒有重名');
??????????console.log('重名驗(yàn)證的結(jié)果是:你沒有重名');
????????}
????????if?(i?==?1)?{
??????????alert('重名驗(yàn)證的結(jié)果是:你還沒有輸入內(nèi)容！');
??????????console.log('重名驗(yàn)證的結(jié)果是:你還沒有輸入內(nèi)容！');
????????}
??????}
????});
????//自己加入的代碼?END
??};
??const?onFinishFailed?=?(errorInfo)?=>?{
????console.log('Failed:',?errorInfo);
??};
??return?(
????<Form
??????{...layout}
??????name="basic"
??????initialValues={{
????????remember:?true,
??????}}
??????onFinish={onFinish}
??????onFinishFailed={onFinishFailed}
????>
??????<Form.Item
????????label="用戶名"
????????name="username"
????????rules={[
??????????{
????????????required:?true,
????????????message:?'請(qǐng)輸入你的用戶名!',
??????????},
????????]}
??????>
????????<Input?/>
??????</Form.Item>
??????<Form.Item
????????label="密碼"
????????name="password"
????????rules={[
??????????{
????????????required:?true,
????????????message:?'請(qǐng)輸入你的密碼!',
??????????},
????????]}
??????>
????????<Input.Password?/>
??????</Form.Item>
??????<Form.Item?{...tailLayout}?name="remember"?valuePropName="checked">
????????<Checkbox>記住我</Checkbox>
??????</Form.Item>
??????<Form.Item?{...tailLayout}>
????????<Button?type="primary"?htmlType="submit"?>
??????????登錄
????????</Button>
??????</Form.Item>
????</Form>
??);
};
//我添加的代碼?START
//自定義組件
class?FormZuJian?extends?React.Component?{
??//用Ajax接收后臺(tái)放到網(wǎng)頁的數(shù)據(jù)的代碼部分?START
??constructor()?{
????super();
????this.state?=?{
??????myData:?[]
????}
??}
??componentWillMount()?{
????//當(dāng)組件將要被掛載到頁面時(shí)獲取數(shù)據(jù)：
????//?$.ajax({
????//?????url:?'http://localhost:8777/?callback=?',
????//?????type:?'POST',
????//?????dataType:?'jsonp',
????//?????success:?(data)?=>?{
????//?????????this.setState({
????//?????????????myData:?data
????//?????????});
????//?????????console.log(data)
????//?????}
????//?});
??}
??//用Ajax接收后臺(tái)放到網(wǎng)頁的數(shù)據(jù)的代碼部分?END
??render()?{
????return?<Demo?/>;
??}
}
//自己寫過的錯(cuò)誤代碼：?<div><Demo?/>{this.state.myData}</div>?;
//我添加的代碼?END
//我添加的代碼——>
export?default?FormZuJian;
//antd中的源碼——>
//?ReactDOM.render(<Demo?/>,?mountNode);
index.js
//目錄——>
//?reactjs必備源碼部分
//?個(gè)人添加的導(dǎo)入antd.css的代碼部分
//?個(gè)人添加的導(dǎo)入組件的代碼部分
//?個(gè)人科普——>
//?個(gè)人注釋：Dg是表格組件
//?FormZuJian.js是表單組件
//個(gè)人總結(jié)的導(dǎo)入代碼模板：import?自定義文件別名（一般我習(xí)慣和導(dǎo)入文件名統(tǒng)一）?from??文件路徑;
/******************/
//reactjs必備源碼部分?START?
import?React?from?'react';
import?ReactDOM?from?'react-dom';
import?'./index.css';
//reactjs必備源碼部分?END
//（Router是要自己寫的路由的部分，暫時(shí)我不寫和不用導(dǎo)入）?START?
//?import?Router?from?'./comp/Router';
//（Router是要自己寫的路由的部分，暫時(shí)我不寫和不用導(dǎo)入）?END
//個(gè)人添加的導(dǎo)入antd.css的代碼部分?START
import?'antd/dist/antd.css';
//個(gè)人添加的導(dǎo)入antd.css的代碼部分?END
//個(gè)人添加的導(dǎo)入組件的代碼部分?START
import?MyTable?from?'./comp/MyTable';
import?Dg?from?'./comp/Dg';
import?FormZuJian?from?'./comp/FormZuJian';
//個(gè)人添加的導(dǎo)入組件的代碼部分?END
import?reportWebVitals?from?'./reportWebVitals';
ReactDOM.render(
??
??<FormZuJian?/>,
??document.getElementById('root')
);
//?If?you?want?to?start?measuring?performance?in?your?app,?pass?a?function
//?to?log?results?(for?example:?reportWebVitals(console.log))
//?or?send?to?an?analytics?endpoint.?Learn?more:?https://bit.ly/CRA-vitals
reportWebVitals();
//可選擇的組件
/*?<Dg?/>?：表格組件*/
/*??<FormZuJian?/>?：表單組件*/
serv2.js
let?http?=?require('http');
let?url?=?require('url');
http.createServer(function(req,res){
????let?ps?=?url.parse(req.url,true).query;
????const?data?=?[
????????{
??????????
????????????name:?'三連',
????????????pwd:?666
????????},
????????{
???????????
????????????name:?'關(guān)注',
????????????pwd:888
???????????
????????},
????????{
??????????
????????????name:?'詩書畫唱',
????????????pwd:999
????????},
????];
????res.end(ps.callback?+?'('?+?JSON.stringify(data)?+?')');
}).listen(8777);
console.log('http://localhost:8777');
例子3：reactjs+nodejs ajax實(shí)現(xiàn)省份城市的下拉框聯(lián)動(dòng)效果，下拉框默認(rèn)選中，使用antd。
cascade
運(yùn)行方法
例子3和例子2很多操作都相同
可以修改數(shù)據(jù)為中文和3級(jí)聯(lián)動(dòng)變成2級(jí)聯(lián)動(dòng)的方法
可以把別人寫好的3級(jí)聯(lián)動(dòng)組件化
運(yùn)行2個(gè)服務(wù)器
Cascade.js
import?{?Cascader?}?from?'antd';
//我添加的代碼?START
//用來使用Reactjs的React模塊——>
import?React?from?'react';
//npm?install?jquery?--save
//用來寫Ajax的jquery模塊——>
import?$?from?'jquery';
//我添加的代碼?END
/*我注釋掉的源碼?START
下面的內(nèi)容改寫到用了nodejs的后臺(tái)的js文件中和前臺(tái)中的Cascade.js級(jí)聯(lián)選擇組件（下拉框聯(lián)動(dòng)）對(duì)應(yīng)。
const?options?=?[
??{
????value:?'zhejiang',
????label:?'Zhejiang',
????children:?[
??????{
????????value:?'hangzhou',
????????label:?'Hangzhou',
????????children:?[
??????????{
????????????value:?'xihu',
????????????label:?'West?Lake',
??????????},
????????],
??????},
????],
??},
??{
????value:?'jiangsu',
????label:?'Jiangsu',
????children:?[
??????{
????????value:?'nanjing',
????????label:?'Nanjing',
????????children:?[
??????????{
????????????value:?'zhonghuamen',
????????????label:?'Zhong?Hua?Men',
??????????},
????????],
??????},
????],
??},
];
我注釋掉的源碼?END*/
function?onChange(value)?{
??console.log(value);
}
//我添加的代碼?START
class?Cascade?extends?React.Component?{
????//用Ajax接收后臺(tái)放到網(wǎng)頁的數(shù)據(jù)的代碼部分?START
????constructor()?{
??????super();
??????this.state?=?{
????????myData:?[]
??????}
????}
????componentWillMount()?{
??????$.ajax({
??????????url:?'http://localhost:8777/?callback=?',
??????????type:?'POST',
??????????dataType:?'jsonp',
??????????success:?(data)?=>?{
??????????????this.setState({
??????????????????myData:?data
??????????????});
??
??????????????console.log(data)
??????????}
??????});
????}
??
????//用Ajax接收后臺(tái)放到網(wǎng)頁的數(shù)據(jù)的代碼部分?END
??
??
????render()?{
??????return?<Cascader?options={this.state.myData}?onChange={onChange}?placeholder="請(qǐng)選擇"?/>;
??
????}
??
??}
?
export?default?Cascade;
??//我添加的代碼?END
??//我注釋掉的源碼?START
//?ReactDOM.render(
//???<Cascader?options={options}?onChange={onChange}?placeholder="Please?select"?/>,
//???mountNode,
//?);
??//我注釋掉的源碼?END
index.js
//?import?React?from?'react';
//?import?ReactDOM?from?'react-dom';
//?import?'./index.css';
//?import?App?from?'./App';
//?//導(dǎo)入Hello組件
//?import?ZuJianName1?from?'./comp/ZuJianName1';
//?import?reportWebVitals?from?'./reportWebVitals';
//?ReactDOM.render(
//???<ZuJianName1?/>,
//???document.getElementById('root')
//?);
//?//?If?you?want?to?start?measuring?performance?in?your?app,?pass?a?function
//?//?to?log?results?(for?example:?reportWebVitals(console.log))
//?//?or?send?to?an?analytics?endpoint.?Learn?more:?https://bit.ly/CRA-vitals
//?reportWebVitals();
/******************/
//目錄——>
//?reactjs必備源碼部分
//?個(gè)人添加的導(dǎo)入antd.css的代碼部分
//?個(gè)人添加的導(dǎo)入組件的代碼部分
//?個(gè)人科普——>
//?個(gè)人注釋：Dg是表格組件
//?FormZuJian.js是表單組件
//個(gè)人總結(jié)的導(dǎo)入代碼模板：import?自定義文件別名（一般我習(xí)慣和導(dǎo)入文件名統(tǒng)一）?from??文件路徑;
/******************/
//reactjs必備源碼部分?START?
import?React?from?'react';
import?ReactDOM?from?'react-dom';
import?'./index.css';
//reactjs必備源碼部分?END
//（Router是要自己寫的路由的部分，暫時(shí)我不寫和不用導(dǎo)入）?START?
//?import?Router?from?'./comp/Router';
//（Router是要自己寫的路由的部分，暫時(shí)我不寫和不用導(dǎo)入）?END
//個(gè)人添加的導(dǎo)入antd.css的代碼部分?START
import?'antd/dist/antd.css';
//個(gè)人添加的導(dǎo)入antd.css的代碼部分?END
//個(gè)人添加的導(dǎo)入組件的代碼部分?START
import?MyTable?from?'./comp/MyTable';
import?Dg?from?'./comp/Dg';
import?FormZuJian?from?'./comp/FormZuJian';
import?Cascade?from?'./comp/Cascade';
//個(gè)人添加的導(dǎo)入組件的代碼部分?END
import?reportWebVitals?from?'./reportWebVitals';
ReactDOM.render(
??
??<Cascade?/>,
??document.getElementById('root')
);
//?If?you?want?to?start?measuring?performance?in?your?app,?pass?a?function
//?to?log?results?(for?example:?reportWebVitals(console.log))
//?or?send?to?an?analytics?endpoint.?Learn?more:?https://bit.ly/CRA-vitals
reportWebVitals();
/*可選擇的組件
?<Dg?/>?：表格組件
<FormZuJian?/>?：表單組件
??<Cascade?/>?：聯(lián)級(jí)選擇（下拉框聯(lián)動(dòng)）組件
??
??*/
serv3.js
let?http?=?require('http');
let?url?=?require('url');
http.createServer(function(req,res){
????let?ps?=?url.parse(req.url,true).query;
????const?data?=?[
????????{
??????????value:?'浙江',
??????????label:?'浙江',
??????????children:?[
????????????{
??????????????value:?'杭州',
??????????????label:?'杭州',
??????????????children:?[
????????????????{
??????????????????value:?'富陽',
??????????????????label:?'富陽',
????????????????},
????????????????{
??????????????????value:?'臨安',
??????????????????label:?'臨安',
????????????????},
??????????????],
????????????},
????????????{
??????????????value:?'麗水',
??????????????label:?'麗水',
??????????????children:?[
????????????????{
??????????????????value:?'景寧',
??????????????????label:??'景寧',
????????????????},
??????????????],
????????????},
??????????],
????????},
????????{
??????????value:?'江蘇',
??????????label:?'江蘇',
??????????children:?[
????????????{
??????????????value:?'南京',
??????????????label:?'南京',
??????????????children:?[
????????????????{
??????????????????value:?'高淳',
??????????????????label:?'高淳',
????????????????},
??????????????],
????????????},
??????????],
????????},
??????];
????res.end(ps.callback?+?'('?+?JSON.stringify(data)?+?')');
}).listen(8777);
console.log('http://localhost:8777');
下拉框默認(rèn)選中其實(shí)很容易，我HBuilder中寫好的下拉框默認(rèn)選擇的組件，直接寫到VScode中，成為組件，和上面一樣的調(diào)用就可以了，如果想用Ajax，就把寫死的數(shù)據(jù)改寫成Ajax的部分的Mydata等等。
還可以給父組件加很多屬性，state狀態(tài)機(jī)等等，看個(gè)人需求吧，比較容易。
例子4：用onInput事件，ref和innerHTML實(shí)現(xiàn)的更好且更簡(jiǎn)潔的重名驗(yàn)證
ChongMingYanZheng.js
import?React?from?'react';
//npm?install?jquery?--save
import?$?from?'jquery';
class?ChongMingYanZheng?extends?React.Component{
????constructor(){
????????super();
????????this.state={
????????????txt:'aa'
????????}
????}
????componentWillMount(){
????????this.vv=$.ajax({
????????????url:'http://localhost:8777/?callback=?',
????????????type:'POST',
????????????dataType:'jsonp',
????????????success:data=>{
????????????????//console.log(data.msg);
????????????????this.setState({
????????????????????txt:data.name
????????????????})
????????????}
????????})
????}
????componentWillUnmount(){
????????//當(dāng)組件被卸載時(shí),取消未完成的請(qǐng)求
????????this.vv.abort();
????}
????change=()=>{
????????this.vv=$.ajax({
????????????????????url:'http://localhost:8777/',
????????????????????type:'POST',
????????????????????dataType:'jsonp',
????????????????????success:(data)?=>?{data.map(o=>{
????????????????????????console.log(o.name);
????????????????????????if(this.refs.in.value==o.name){
????????????????????????????this.refs.div1.innerHTML='用戶名已存在';
????????????????????????}
????????????????????????
????????????????????????
????????????????????????else??if(this.refs.in.value!=o.name&&this.refs.in.value!==""){
????????????????????????????this.refs.div1.innerHTML='該用戶名可用';
????????????????????????}
????????????????????????else??if(this.refs.in.value==""){
????????????????????????????this.refs.div1.innerHTML='用戶名不可以為空';
????????????????????????}
????????????????????})}
????????????????})
????????
????}
????render(){
????????return??(?<div><input?type='text'onInput={this.change}?ref='in'?/>
????????????????????????<div?ref='div1'?></div>
????????</div>?)
????}
}
export?default?ChongMingYanZheng;
index.js
/******************/
//目錄——>
//?reactjs必備源碼部分
//?個(gè)人添加的導(dǎo)入antd.css的代碼部分
//?個(gè)人添加的導(dǎo)入組件的代碼部分
//?個(gè)人科普——>
//?個(gè)人注釋：Dg是表格組件
//?FormZuJian.js是表單組件
//個(gè)人總結(jié)的導(dǎo)入代碼模板：import?自定義文件別名（一般我習(xí)慣和導(dǎo)入文件名統(tǒng)一）?from??文件路徑;
/******************/
//reactjs必備源碼部分?START?
import?React?from?'react';
import?ReactDOM?from?'react-dom';
import?'./index.css';
//reactjs必備源碼部分?END
//（Router是要自己寫的路由的部分，暫時(shí)我不寫和不用導(dǎo)入）?START?
import?Router?from?'./route';
//（Router是要自己寫的路由的部分，暫時(shí)我不寫和不用導(dǎo)入）?END
//個(gè)人添加的導(dǎo)入antd.css的代碼部分?START
import?'antd/dist/antd.css';
//個(gè)人添加的導(dǎo)入antd.css的代碼部分?END
//個(gè)人添加的導(dǎo)入組件的代碼部分?START
import?MyTable?from?'./comp/MyTable';
import?Dg?from?'./comp/Dg';
import?FormZuJian?from?'./comp/FormZuJian';
import?Cascade?from?'./comp/Cascade';
import?Dg_axios?from?'./comp/Dg_axios';
import?ChongMingYanZheng?from?'./comp/ChongMingYanZheng';
//個(gè)人添加的導(dǎo)入組件的代碼部分?END
import?reportWebVitals?from?'./reportWebVitals';
ReactDOM.render(
??
??<ChongMingYanZheng/>,
??document.getElementById('root')
);
//?If?you?want?to?start?measuring?performance?in?your?app,?pass?a?function
//?to?log?results?(for?example:?reportWebVitals(console.log))
//?or?send?to?an?analytics?endpoint.?Learn?more:?https://bit.ly/CRA-vitals
reportWebVitals();
/*可選擇的組件
?<Dg?/>?：表格組件
<FormZuJian?/>?：表單組件
??<Cascade?/>?：聯(lián)級(jí)選擇（下拉框聯(lián)動(dòng)）組件
??<Dg_axios/>:是用了axios技術(shù)接收數(shù)據(jù)的用了antd的表格組件
serv2.js（見例2）
