在进入话题之前，我们先说一个场景。
类似于微博140字的限制和美团外卖app点餐备注只限50字。像这种需求我们该如何实现。
分析需求：
1.既然有字数限制，我们在textarea框中输入的字数超出这个最大的字数时，我们该如何处理。
简而言之就是超出的字数，我们要截取掉。
并且要提示输入了多少字。
<textarea onChange={(e)=>this.changeEvent(e)}>
</textarea>上面注意要把e传进去。
当在输入框改变时，得到输入的值
changeEvent(e){
let value = this.state.value;
this.setState({
remark: dealtextareaData(value)
})
}//处理多余的字数
dealtextareaData(){
if(value.length > 140){
return value.substring(0,500);
}
return value;
}下面这个写的比较全，可以供参考
textareaOnChange(e){
let value = e.target.value;
if(value.length > 140){
this.setState({
remark_tips: true,
word_number: 140
})
}else{
this.setState({
remark_tips: false,
word_number: value.length
})
}
this.setState({
remark: this.dealInputData(value),
remarkBorder: false
});
}整个代码
export default class joinUs extends Component{
constructor(props){
super(props);
this.state = {
//填写的信息
username: '',
userphone: '',
usermail: '',
remark: '',
provinceName: '',
cityName:'',
//模态框
isShowMoadl: false,
isShowCatchModal: false,
isShowSuccessModal: false,
//输入错误的提示
name_tips: false,
phone_tips: false,
mail_tips: false,
remark_tips: false,
province_city_tips: false,
//为空的提示
name_tips_empty: false,
phone_tips_empty: false,
mail_tips_empty : false,
province_city_tips_empty: false,
//模态框遮罩
isShade: false,
city_show: false,
city_value: '',
//计数
word_number: 0,
//给输入框加border
nameBorder: false,
phoneBorder: false,
cityBorder: false,
mailBorder: false,
remarkBorder: false
}
}
//点击提交
submitEvent(){
console.log(this.state);
var value = this.state.username && this.state.userphone
&& this.state.provinceName && this.state.cityName
&& (!this.state.name_tips) && (!this.state.phone_tips)
&& (!this.state.mail_tips) &&(!this.state.remark_tips)
&& (!this.state.province_city_tips);
if(value){
this.submitData();
}else{
this.setState({
isShowMoadl: true,
isShade: true,
// name_tips: true,
// phone_tips: true,
// province_city_tips: true,
})
}
}
//请求数据
submitData(){
let url = "/api/franchisee/join";
let param ={
'franchiseeName':this.state.username,
'cellPhone':this.state.userphone,
'provinceName':this.state.provinceName,
'cityName':this.state.cityName,
'emailAddress': this.state.usermail,
'remark': this.state.remark
}
const request = new Request(url, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(param)
})
return fetch(request).then(res=>{
return res.json()
}).then(data=>{
console.log('submitData',data);
//数据请求过来了证明已经提交信息成功，所以展示成功弹出框
if(data.result === 0){
this.setState({
isShowSuccessModal: true,
isShade: true
})
}
}).catch(err=> {
//console.log(err);
this.setState({
isShowCatchModal: true,
isShade: true
})
})
}
//如何校验姓名
checkNameEvent(e){
//console.log('失去焦点');
this.setState({
username: e.target.value,
nameBorder: false
},()=>{
var reg = /^[a-zA-Z0-9\u4e00-\u9fa5]{1,10}$/;
if(!(reg.test(this.state.username))){
//console.log('请输入正确的用户名');
this.setState({
name_tips: true
})
}else{
this.setState({
name_tips: false
})
}
})
}
//用户名点击事件，点击用户名时，显示高亮效果。
nameFocusEvent(){
this.setState({
nameBorder: true
})
}
//校验电话号码
checkPhoneEvent(e){
//console.log('aa');
this.setState({
userphone: e.target.value,
phoneBorder: false
},()=>{
var reg = /^1[34578]\d{9}$/;
//console.log(this.state.userphone);
if(!(reg.test(this.state.userphone))){
console.log('请输入正确的手机号码');
this.setState({
phone_tips: true
})
}else{
this.setState({
phone_tips: false
})
}
})
}
//点击手机输入框，显示高亮效果
phoneFocusEvent() {
this.setState({
phoneBorder: true
})
}
//校验城市
selectEvent(value1,value2){
this.setState({
provinceName: value1,
cityName: value2
},()=>{
if(value1&&value2){
//console.log('没有选城市');
this.setState({
province_city_tips: false
})
}else{
this.setState({
province_city_tips: true
})
}
});
}
onchangeEvent(){
//console.log('ww');
if(this.state.city_value = ''){
this.setState({
province_city_tips: true
})
}else{
this.setState({
province_city_tips: false
})
}
}
onCancelEvent(){
this.setState({
city_show: false
})
if( this.state.city_value == ''){
this.setState({
province_city_tips: true
})
}else{
this.setState({
province_city_tips: false
})
}
}
//校验邮件
checkMailEvent(e){
this.setState({
usermail: e.target.value,
mailBorder: false
},()=>{
if(this.state.usermail){
var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
//console.log(this.state.usermail);
if(!(reg.test(this.state.usermail))){
this.setState({
mail_tips: true
})
}else{
this.setState({
mail_tips: false
})
}
}else{
console.log('邮箱选填');
this.setState({
mail_tips: false
})
}
})
}
//点击邮箱输入框时，显示高亮效果
mailFocusEvent() {
this.setState({
mailBorder: true
})
}
//校验textarea框中的内容
checkRemark(e){
//console.log('checkRemark');
this.setState({
remark: e.target.value,
remarkBorder: false
})
}
//点击备注输入框时，显示高亮效果
remarkFocusEvent() {
this.setState({
remarkBorder: true
})
}
//备注框改变时
dealInputData(value){
if(value.length > 140){
return value.substring(0,140);
}
return value;
}
textareaOnChange(e){
let value = e.target.value;
if(value.length > 140){
this.setState({
remark_tips: true,
word_number: 140
})
}else{
this.setState({
remark_tips: false,
word_number: value.length
})
}
this.setState({
remark: this.dealInputData(value),
remarkBorder: false
});
}
//关闭成功的模态框时，所有的信息都清空
closeSuccessHandle(){
this.setState({
isShowSuccessModal: false,
isShade: false,
username: '',
userphone: '',
usermail: '',
remark: '',
provinceName: '',
cityName:'',
city_value: ''
})
}
/*关闭异常时模态框*/
closeCatchHandle(){
this.setState({
isShowCatchModal: false,
isShade: false
})
}
//关闭失败模态框
closeHandle(){
this.setState({
isShowMoadl: false,
isShade: false,
})
}
//成功时的模态框
successModal(){
return (
<div className="join-modal">
<div className="join-modal-content center">
<img src={ closeImg } alt="" className="join-cancel-img" onClick={this.closeSuccessHandle.bind(this)}/>
<img className="failImg" src={ successImg } alt="" />
<div className="submit_success">申请提交成功!</div>
<div className="describe join-message">
<p className="center">工作人员将第一时间回访，</p>
<p className="center">请您耐心等待！</p>
</div>
</div>
</div>
)
}
// 失败时的模态框
failModal(){
return (
<div className="join-modal">
<div className="join-modal-content center">
<img src={ closeImg } alt="" className="join-cancel-img" onClick={this.closeHandle.bind(this)}/>
<img className="failImg" src={ failImg } alt="" />
<div className="join-message-tips">
<div className="message_font center">您填写的信息不完整，请</div>
<div className="message_font center">修改后重新提交</div>
</div>
</div>
</div>
)
}
//提交时网络异常或着其他情况的modal
catchModal(){
return (
<div className="join-modal">
<div className="join-modal-content center">
<img src={ closeImg } alt="" className="join-cancel-img" onClick={this.closeCatchHandle.bind(this)}/>
<img className="failImg" src={ failImg } alt="" />
<div className="join-message-tips">
<p className="center message_font">当前网络或者服务器异常</p>
</div>
</div>
</div>
)
}
onchange(text){
let text1 = text;
text1 = text1.split(" ");
this.setState({city_value:text,provinceName: text1[0], cityName: text1[1],city_show:false});
if(this.state.city_value){
this.setState({
province_city_tips: false
})
}else{
province_city_tips: true
}
}
clickEvent(){
this.setState({city_show: true});
}
nameChange(e){
this.setState({username:e.target.value})
}
phoneChange(e){
this.setState({userphone:e.target.value})
}
emailChange(e){
this.setState({usermail:e.target.value})
}
render(){
return (
<div className="joinus_container">
<div className="joinus center">
<i></i>
<img src={ starImg } alt="" />
<span className="partner center">诚招星糖合伙人</span>
<img src={ starImg } alt="" />
<i></i>
</div>
<p className="join-title center">加入星糖，即刻启程</p>
<div className="wrap-joinus">
<div className="join_username" style={{ border: this.state.nameBorder?'1px solid orange':'1px solid #ccc'}}>
<label>姓名<span className="join_must">*</span>：</label>
<input onBlur={ this.checkNameEvent.bind(this)}
onFocus = { this.nameFocusEvent.bind(this) }
value={this.state.username}
onChange={this.nameChange.bind(this)}
/>
</div>
<div>
{
this.state.name_tips ?
<Text tips="请填写姓名（10个字以内）" />:''
}
</div>
<div>
{
this.state.name_tips_empty ?
<Text tips="请填写姓名" />:''
}
</div>
<div className="join_username" style={{ border: this.state.phoneBorder?'1px solid orange':'1px solid #ccc'}}>
<label>手机<span className="join_must">*</span>：</label>
<input
onBlur={ this.checkPhoneEvent.bind(this)}
onFocus = { this.phoneFocusEvent.bind(this) }
value={this.state.userphone}
onChange={this.phoneChange.bind(this)}
/>
</div>
<div>
{
this.state.phone_tips ?
<Text tips="请填写正确的手机号码" />:''
}
</div>
<div>
{
this.state.phone_tips_empty ?
<Text tips="电话号码不能为空" />:''
}
</div>
<div className="join_username" onClick={()=>this.clickEvent()}>
<label className="city_label">城市<span className="join_must">*</span>：</label>
<span className="join-cityname">{this.state.city_value}</span>
<CityPicker
data={cnCity}
onCancel={ this.onCancelEvent.bind(this)}
onChange={text=>this.onchange(text)}
show={this.state.city_show}
/>
</div>
<div>
{
this.state.province_city_tips ?
<Text tips="省、市不能为空" />:''
}
</div>
<div>
{
this.state.province_city_tips_empty ?
<Text tips="省和市不能为空" />:''
}
</div>
<div className="join_username" style={{ border: this.state.mailBorder?'1px solid orange':'1px solid #ccc'}}>
<label>邮箱<span className="mail_star">*</span>：</label>
<input type="text" onFocus = { this.mailFocusEvent.bind(this) } onBlur={ this.checkMailEvent.bind(this)} value={this.state.usermail } onChange={this.emailChange.bind(this)}/>
</div>
<div>
{
this.state.mail_tips ?
<Text tips="请填写正确的邮箱" /> :''
}
</div>
<div className="join_textarea" style={{ border: this.state.remarkBorder?'1px solid orange':'1px solid #ccc'}}>
<label>备注<span className="mail_star">*</span>:</label>
<textarea
className = "remark_fontSize"
value={ this.state.remark }
onChange={(e) => this.textareaOnChange(e)}
onFocus = { this.remarkFocusEvent.bind(this) }
onBlur={ this.checkRemark.bind(this)}
></textarea>
<div className="word_tips">
<p className="word_number">{ this.state.word_number }</p>
<p className="word_total">/140</p>
</div>
</div>
<div>
{
this.state.remark_tips ?
<Text tips="限制140字" /> :''
}
</div>
<div className="joinus-btn" onClick={this.submitEvent.bind(this)}>
提交
</div>
</div>
<div className="joinus-tel center">
</div>
{
this.state.isShade ? <div className="shade"></div>: null
}
{
this.state.isShowSuccessModal ? this.successModal() : null
}
{
this.state.isShowMoadl ? this.failModal() : null
}
{
this.state.isShowCatchModal ? this.catchModal() : null
}
</div>
)
}
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
