【JS】逻辑处理
1.计算会员进度
const a = res.data.directCount（当前充值点券） / nextLevelData.map(item => item.direct_number（下一级需要点券）); //得出小数const c = 设计稿长度 /375 * Dimensions.get('window').width; （进度条长度）
会员进度： width1: 0.5 * 140 = 70 （假设）
满级时会员进度
<View
style={\[
styles.barActive,
{
width: '96%',
},
\]}
/>
<View
style={\[
styles.process,
{
// transform: \[{translateX: Dimensions.get('window').width < 410 ? autoWidth(243):autoWidth(255)}\], //这里不用transform了 因为他不能用百分比
left:'96%' //用这个
},
\]}
>会员进度页面
import React, {Component} from 'react';
import {
View,
Text,
StyleSheet,
Image,
ActivityIndicator,
ImageBackground,
Dimensions,
ScrollView,
} from 'react-native';
import NavigationBar from '../../components/base/NavigationBar';
import {Toast, Theme} from 'teaset';
import {inject, observer} from 'mobx-react/index';
import FastImage from 'react-native-fast-image';
import Http from '../../utils/Http';
import Touchable from '../../components/base/Touchable';
import Config from '../../Config';
import Styles, {theme1, theme} from '../../style/Lib';
import Shadow from '../../style/Shadow';
const icon = [
require('../../resource/icon/user/level00.png'),
require('../../resource/icon/user/vip1.png'),
require('../../resource/icon/user/vip2.png'),
require('../../resource/icon/user/vip3.png'),
require('../../resource/icon/user/vip4.png'),
require('../../resource/icon/user/vip5.png'),
];
const vipdegree = [
require('../../resource/icon/user/v0.png'),
require('../../resource/icon/user/v1.png'),
require('../../resource/icon/user/v2.png'),
require('../../resource/icon/user/v3.png'),
require('../../resource/icon/user/v4.png'),
require('../../resource/icon/user/v5.png'),
];
const smallvip = [
require('../../resource/icon/user/small_v0.png'),
require('../../resource/icon/user/small_v1.png'),
require('../../resource/icon/user/small_v2.png'),
require('../../resource/icon/user/small_v3.png'),
require('../../resource/icon/user/small_v4.png'),
require('../../resource/icon/user/small_v5.png'),
];
const vipbg = [
require('../../resource/icon/user/v0_bg.png'),
require('../../resource/icon/user/v1_bg.png'),
require('../../resource/icon/user/v2_bg.png'),
require('../../resource/icon/user/v3_bg.png'),
require('../../resource/icon/user/v4_bg.png'),
require('../../resource/icon/user/v5_bg.png'),
];
const bgcolor = ['#AEBBC6', '#19448E', '#049406', '#FF9736', '#992A80', '#DB3434'];
const vipBanner = require('../../resource/icon/user/vip_show.png');
function autoWidth(width) {
return width / * Dimensions.get('window').width;
}
@inject('store')
@observer
export default class Level extends Component {
constructor(props) {
super(props);
this.state = {
loading: true,
data: {
totalRecommendNum: ,
vipLevel: ,
nextRecommedNum: ,
},
list: [],
width1: ,
width2: ,
};
}
static navigationOptions = () => {
return {
header: null,
headerMode: 'none',
};
};
componentDidMount() {
this.\_loadLevel();
}
Percentage(num1, num2) {
return Math.round(num1 / num2 \* ) / 100.0 + '%';
}
\_loadLevel() {
this.setState({loading: true});
Http.post('/api/v1/friends/vipLevel', {})
.then((res) => {
if (res.status === ) {
const nextLevelData = res.data.data.filter((item) => item.id === res.data.level + );
const a = res.data.directCount / nextLevelData.map((item) => item.direct\_number);
const b = res.data.allCount / nextLevelData.map((item) => item.tree\_number);
const c = autoWidth();
this.setState({
data: res.data,
list: res.data.data.reverse(),
needShare:
res.data.level ===
?
: nextLevelData.map((item) => item.direct\_number) - res.data.directCount, //下一级需要分享数量
nextShare: nextLevelData.map((item) => item.direct\_number), //下一级分享数量
needPyq:
res.data.level ===
?
: nextLevelData.map((item) => item.tree\_number) - res.data.allCount, //下一级需要朋友圈数量
nextPyq: nextLevelData.map((item) => item.tree\_number), //下一级朋友圈数量
currentShare: res.data.directCount, //当前分享
currentPyq: res.data.allCount, //当前朋友圈
level: res.data.level,
width1: res.data.level === ? c : a \* c,
width2: res.data.level === ? c : b \* c,
});
} else {
Toast.message(res.message);
}
this.setState({loading: false});
})
.catch((err) => {
Toast.message(err);
this.setState({loading: false});
});
}
render() {
const tips = \[
'1. VIP等级由直推好友数和朋友圈好友数直接决定，其中朋友圈好友数包含直推好友数。',
\`. 当您的直推好友数和朋友圈好友数同时满足等级要求时，您将获得专属等级标签和等级福利。\`,
'3. 我们会不定期对您的朋友圈进行账户审查，若出现大批量零活跃度用户，我们有可能对您做降级处理。',
'4. 零活跃度用户判定条件主要包括：超过一个月未登录、注册满三个月但未参与任何功能版块、新注册用户7天内未登录。',
'5. 若您对您当前的VIP等级存在疑问，请您联系官方客服协助处理。',
\];
const {needPyq, level, needShare, currentPyq, currentShare, width1, width2} = this.state;
return (
<View style={{flex: , backgroundColor: '#fff'}}>
<NavigationBar
onBack={() => {
this.props.navigation.pop();
}}
title={'会员等级'}
NoBorderBottom
/>
<ScrollView>
<ImageBackground
imageStyle={{borderRadius: }}
source={vipbg\[level\]}
style={\[styles.avatar\]}
>
<View>
<View style={{flexDirection: 'row', alignItems: 'flex-end'}}>
<FastImage
style={{
width: ,
height: ,
borderRadius: ,
marginRight: ,
overflow: 'hidden',
backgroundColor: '#C9D3FF',
}}
resizeMode={FastImage.resizeMode.cover}
source={{
uri:
this.props.store.User.profile && this.props.store.User.profile.avatar
? \`https://fowin.oss-ap-southeast-1.aliyuncs.com/${this.props.store.User
.profile.avatar}\`
: \`${Config.domain}/static/fowin/e33fb652--4ca1-882d-f89b2715a05e\`,
priority: FastImage.priority.high,
}}
/>
<Image
style={{
marginVertical: ,
width: ,
height: ,
marginRight: ,
resizeMode: 'contain',
}}
source={vipdegree\[level\]}
/>
</View>
{
level === ?
<View
style={{
marginTop: ,
width: ,
marginBottom: ,
paddingHorizontal: ,
paddingVertical: ,
borderRadius: ,
marginLeft: ,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: bgcolor\[level\],
...Shadow.shadow,
}}
>
<Text style={{
color: Styles.theme1.tw,
fontSize: ,
// marginHorizontal: 35
}}>分享更多好友收益更多</Text></View> :
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
width: Dimensions.get('window').width - ,
marginLeft: ,
marginTop: ,
}}
>
<View
style={{
paddingHorizontal: ,
paddingVertical: ,
borderRadius: ,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: bgcolor\[level\],
...Shadow.shadow,
}}
>
<Text style={{color: Styles.theme1.tw, fontSize: , opacity: 0.7}}>
差{needShare}个直推
</Text>
</View>
<View
style={{
paddingHorizontal: ,
borderRadius: ,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: bgcolor\[level\],
...Shadow.shadow,
}}
>
<Text style={{color: Styles.theme1.tw, fontSize: , opacity: 0.7}}>
还需分享{needPyq}个朋友圈
</Text>
</View>
</View>
}
{
level === ?
<View style={{flexDirection: 'row', alignItems: 'center', marginHorizontal: }}>
<Image
style={{
// marginVertical: 13,
width: ,
height: ,
marginRight: ,
resizeMode: 'contain',
flex: ,
}}
source={smallvip\[\]}
/>
<View style={{position: 'relative', marginRight: , flex: }}>
<View
style={{
flexDirection: 'row',
alignItem: 'center',
}}
>
<View style={styles.v5bar}/>
<View
style={\[
styles.barActive,
{
width: '96%',
},
\]}
/>
<View
style={\[
styles.process,
{
// transform: \[{translateX: Dimensions.get('window').width < 410 ? autoWidth(243):autoWidth(255)}\],
left:'96%'
},
\]}
>
<View
style={{
height: ,
width: ,
backgroundColor: Styles.theme1.tw,
borderRadius: ,
marginTop: -,
}}
/>
</View>
</View>
</View>
<Text style={{color: '#FFF', fontSize: }}>MAX</Text>
</View> :
<View style={{flexDirection: 'row', alignItems: 'center', marginHorizontal: }}>
<Image
style={{
// marginVertical: 13,
width: ,
height: ,
marginRight: ,
resizeMode: 'contain',
flex: ,
}}
source={smallvip\[level\]}
/>
<View style={{position: 'relative', marginRight: , flex: }}>
<View
style={{
flexDirection: 'row',
alignItem: 'center',
}}
>
<View style={styles.bar}/>
<View
style={\[
styles.barActive,
{
width: width1,
},
\]}
/>
<View
style={\[
styles.process,
{
transform: \[{translateX: width1}\],
},
\]}
>
<View
style={{
position: 'absolute',
top: -,
height: ,
width: ,
backgroundColor: Styles.theme1.tw,
borderRadius: ,
}}
/>
</View>
</View>
</View>
<View style={{width: }}/>
<View style={{position: 'relative', marginRight: , flex: }}>
<View
style={{
flexDirection: 'row',
alignItem: 'center',
}}
>
<View style={styles.bar}/>
<View
style={\[
styles.barActive,
{
width: width2,
},
\]}
/>
<View
style={\[
styles.process,
{
transform: \[{translateX: width2}\],
},
\]}
>
<View
style={{
position: 'absolute',
top: -,
height: ,
width: ,
backgroundColor: Styles.theme1.tw,
borderRadius: ,
}}
/>
</View>
</View>
</View>
<Image
style={{
marginVertical: ,
width: ,
height: ,
marginLeft: ,
resizeMode: 'contain',
flex: ,
}}
source={smallvip\[level + \]}
/>
</View>
}
<View style={{flexDirection: 'row', alignItems: 'center', marginHorizontal: ,marginTop:}}>
<Text style={{color: Styles.theme1.tw, fontSize: , marginRight: }}>
已分享{currentShare}个好友，朋友圈已有{currentPyq}个好友
</Text>
<Touchable
delayPress={}
onPress={() => {
this.props.navigation.navigate('UserFriends');
}}
>
<Text style={{fontSize: , color: Styles.theme1.tw}}>查看 ></Text>
</Touchable>
</View>
</View>
</ImageBackground>
<View style={{flex: , borderRadius: , marginHorizontal: }}>
<View
style={{
borderRadius: ,
marginTop: , borderWidth: , borderColor: '#F8F8F8', borderBottomWidth: ,
}}
>
<View
style={{
flexDirection: 'row',
paddingVertical: ,
backgroundColor: Styles.theme1.bgc,
}}
>
<Text style={{flex: , textAlign: 'center', color: Styles.theme.g3, fontSize: }}>
等级
</Text>
<Text style={{flex: , textAlign: 'center', color: Styles.theme.g3, fontSize: }}>
分享
</Text>
<Text style={{flex: , textAlign: 'center', color: Styles.theme.g3, fontSize: }}>
朋友圈
</Text>
{/\* <Text style={{flex: 1, textAlign: 'right', color: '#333', fontSize: 14}}>等级名称</Text> \*/}
</View>
{this.state.loading ? (
<View style={{paddingTop: }}>
<ActivityIndicator/>
</View>
) : (
this.state.list.map((item, index) => (
<View
key={index}
style={{
flexDirection: 'row',
borderTopColor: Styles.theme1.tw,
backgroundColor: index % === ? Styles.theme1.bgc : Styles.theme1.tw,
borderTopWidth: ,
paddingVertical: ,
alignItems: 'center',
}}
>
<View
style={{
flex: ,
textAlign: 'center',
alignItems: 'center',
paddingVertical: ,
}}
>
<Image
style={{width: , height: , marginRight: , resizeMode: 'contain'}}
source={icon\[item.lever\]}
/>
</View>
<Text
style={{
flex: ,
textAlign: 'center',
fontSize: ,
color: Styles.theme.g3,
paddingVertical: ,
}}
>
{item.direct\_number}
</Text>
<Text
style={{
flex: ,
textAlign: 'center',
fontSize: ,
color: Styles.theme.g3,
paddingVertical: ,
}}
>
{item.tree\_number}
</Text>
</View>
))
)}
</View>
<View style={{borderTopColor: Styles.theme1.bgc, borderTopWidth: , marginHorizontal: }}/>
</View>
<View style={{paddingTop: , paddingHorizontal: }}>
<Text style={{color: theme.g3, fontSize: theme.z18, marginBottom: , fontWeight: 'bold'}}>
会员等级说明
</Text>
{tips.map((item, index) => (
<Text
key={index}
style={{
color: Styles.theme1.tc2,
fontSize: ,
lineHeight: ,
marginTop: ,
}}
>
{item}
</Text>
))}
</View>
<View style={{paddingTop: , paddingHorizontal: }}>
<Text style={{
color: theme.g3,
fontSize: theme.z18,
marginBottom: ,
fontWeight: 'bold',
}}>会员优选</Text>
<Text style={{marginBottom: , fontSize: , color: theme1.tph}}>根据您的会员等级，为您精选一下优秀活动~</Text>
</View>
<View style={{marginBottom: Theme.screenInset.bottom + , alignItems: 'center'}}>
<Image
style={{width: / \* Dimensions.get('window').width, resizeMode: 'contain'}}
source={vipBanner}
/>
</View>
</ScrollView>
</View>
);
} }
const styles = StyleSheet.create({
avatar: {
padding: ,
marginHorizontal: ,
borderRadius: ,
minHeight: ,
marginTop: ,
},
member: {
padding: ,
},
bar: {
position: 'absolute',
height: ,
// marginTop: 2.4,
marginHorizontal: ,
backgroundColor: '#fff',
borderRadius: ,
opacity: 0.2,
width: autoWidth(),
},
v5bar: {
position: 'absolute',
height: ,
// marginTop: 2.4,
marginHorizontal: ,
backgroundColor: '#fff',
borderRadius: ,
opacity: 0.2,
width: autoWidth(),
},
barActive: {
position: 'absolute',
height: ,
borderRadius: ,
// marginTop: 2.4,
marginHorizontal: ,
backgroundColor: '#fff',
},
process: {
position: 'absolute',
height: ,
top: ,
left: ,
},
});
会员等级页面
2.计算小数点.toFixed(2) 取小数点后两位
3.后台传值来选取选项Option
const select = [
{
name: '筛选时间',
type: 'date',
dataIndex: ['start_time', 'end_time']
},
{
name: '交易所',
type: 'select',
option: [
{ id: 'huobipro', name: 'huobipro' },
{ id: 'binance', name: 'binance' }
\],
dataIndex: 'exchange'
},
{
name: '交易对',
type: 'select',
option: \[\],
dataIndex: 'symbol'
} ]
componentDidMount() {
this.getSymobls()
}
getSymobls() {
HttpUtils.postForm('/api/teacher/trade/exchange/symbols', {}).then(res => {
if (res.status === ) {
let arr1 = new Set(res.data.map((item) => item.symbol))
let symbol = Array.from(arr1).map(item => ({id: item, name: item}));
select[].option = symbol; //添加列表
this.setState({
select: this.state.select,
})
}
}).catch((err) => {
console.log(err);
})
}
后台传来的数据
{
"data": [
{
"id": ,
"created_at": "0001-01-01T00:00:00Z",
"updated_at": "0001-01-01T00:00:00Z",
"deleted_at": null,
"exchange": "huobipro",
"symbol": "ADA/USDT",
"left_coin": "ADA",
"right_coin": "USDT",
"min_unit_amount":
},
{
"id": ,
"created_at": "0001-01-01T00:00:00Z",
"updated_at": "0001-01-01T00:00:00Z",
"deleted_at": null,
"exchange": "huobipro",
"symbol": "TRX/USDT",
"left_coin": "TRX",
"right_coin": "USDT",
"min_unit_amount":
},
{
"id": ,
"created_at": "0001-01-01T00:00:00Z",
"updated_at": "0001-01-01T00:00:00Z",
"deleted_at": null,
"exchange": "binance",
"symbol": "ADA/USDT",
"left_coin": "ADA",
"right_coin": "USDT",
"min_unit_amount":
},
{
"id": ,
"created_at": "0001-01-01T00:00:00Z",
"updated_at": "0001-01-01T00:00:00Z",
"deleted_at": null,
"exchange": "binance",
"symbol": "EOS/USDT",
"left_coin": "EOS",
"right_coin": "USDT",
"min_unit_amount":
},
{
"id": ,
"created_at": "0001-01-01T00:00:00Z",
"updated_at": "0001-01-01T00:00:00Z",
"deleted_at": null,
"exchange": "huobipro",
"symbol": "EOS/USDT",
"left_coin": "EOS",
"right_coin": "USDT",
"min_unit_amount":
},
{
"id": ,
"created_at": "0001-01-01T00:00:00Z",
"updated_at": "0001-01-01T00:00:00Z",
"deleted_at": null,
"exchange": "huobipro",
"symbol": "ETH/USDT",
"left_coin": "ETH",
"right_coin": "USDT",
"min_unit_amount":
},
{
"id": ,
"created_at": "0001-01-01T00:00:00Z",
"updated_at": "0001-01-01T00:00:00Z",
"deleted_at": null,
"exchange": "huobipro",
"symbol": "BTC/USDT",
"left_coin": "BTC",
"right_coin": "USDT",
"min_unit_amount":
},
{
"id": ,
"created_at": "0001-01-01T00:00:00Z",
"updated_at": "0001-01-01T00:00:00Z",
"deleted_at": null,
"exchange": "huobipro",
"symbol": "ETC/USDT",
"left_coin": "ETC",
"right_coin": "USDT",
"min_unit_amount":
},
{
"id": ,
"created_at": "0001-01-01T00:00:00Z",
"updated_at": "0001-01-01T00:00:00Z",
"deleted_at": null,
"exchange": "huobipro",
"symbol": "BCH/USDT",
"left_coin": "BCH",
"right_coin": "USDT",
"min_unit_amount":
},
{
"id": ,
"created_at": "0001-01-01T00:00:00Z",
"updated_at": "0001-01-01T00:00:00Z",
"deleted_at": null,
"exchange": "huobipro",
"symbol": "HT/USDT",
"left_coin": "HT",
"right_coin": "USDT",
"min_unit_amount":
},
{
"id": ,
"created_at": "0001-01-01T00:00:00Z",
"updated_at": "0001-01-01T00:00:00Z",
"deleted_at": null,
"exchange": "huobipro",
"symbol": "XRP/USDT",
"left_coin": "XRP",
"right_coin": "USDT",
"min_unit_amount":
},
{
"id": ,
"created_at": "0001-01-01T00:00:00Z",
"updated_at": "0001-01-01T00:00:00Z",
"deleted_at": null,
"exchange": "huobipro",
"symbol": "LTC/USDT",
"left_coin": "LTC",
"right_coin": "USDT",
"min_unit_amount":
},
{
"id": ,
"created_at": "0001-01-01T00:00:00Z",
"updated_at": "0001-01-01T00:00:00Z",
"deleted_at": null,
"exchange": "binance",
"symbol": "EOS/USDT",
"left_coin": "EOS",
"right_coin": "USDT",
"min_unit_amount":
},
{
"id": ,
"created_at": "0001-01-01T00:00:00Z",
"updated_at": "0001-01-01T00:00:00Z",
"deleted_at": null,
"exchange": "binance",
"symbol": "ETH/USDT",
"left_coin": "ETH",
"right_coin": "USDT",
"min_unit_amount":
},
{
"id": ,
"created_at": "0001-01-01T00:00:00Z",
"updated_at": "0001-01-01T00:00:00Z",
"deleted_at": null,
"exchange": "binance",
"symbol": "BTC/USDT",
"left_coin": "BTC",
"right_coin": "USDT",
"min_unit_amount":
},
{
"id": ,
"created_at": "0001-01-01T00:00:00Z",
"updated_at": "0001-01-01T00:00:00Z",
"deleted_at": null,
"exchange": "binance",
"symbol": "ETC/USDT",
"left_coin": "ETC",
"right_coin": "USDT",
"min_unit_amount":
},
{
"id": ,
"created_at": "0001-01-01T00:00:00Z",
"updated_at": "0001-01-01T00:00:00Z",
"deleted_at": null,
"exchange": "binance",
"symbol": "BCHABC/USDT",
"left_coin": "BCHABC",
"right_coin": "USDT",
"min_unit_amount":
},
{
"id": ,
"created_at": "0001-01-01T00:00:00Z",
"updated_at": "0001-01-01T00:00:00Z",
"deleted_at": null,
"exchange": "binance",
"symbol": "XRP/USDT",
"left_coin": "XRP",
"right_coin": "USDT",
"min_unit_amount":
},
{
"id": ,
"created_at": "0001-01-01T00:00:00Z",
"updated_at": "0001-01-01T00:00:00Z",
"deleted_at": null,
"exchange": "binance",
"symbol": "LTC/USDT",
"left_coin": "LTC",
"right_coin": "USDT",
"min_unit_amount":
}
],
"message": "success",
"status":
}
后台传来的Symbol数据
4.刷新页面的时候 不要从 NaN 跳到数字 可以接受从0跳，但是不能接受NaN
this.state = {
balance:
}
5.表格已经检验出条件错误，但是 还是提交了表格
解决办法，在把值赋给values.cny_price（Form提交的key）之前 ，判断它的值 ，不符合要求的话就return
6. 点击房间号，获取当前点击的name，id或者其他值（ 我这里只设置了label和roomId值） ====>
RoomList: res.data.map(item => ({
label: item.name,
roomId:item.id
}))
代码：
{RoomList ? RoomList.map((item, index) => (
this.setState({
checkRoom: index,
roomId:item.roomId // 这里可以获取，但是我用了下面的方法（这种方法不能设置默认值）
}); console.log('看看2') }} style={{ fontSize: , color: this.state.checkRoom === index ? '#FD8A00' : '#666', marginRight: (index + ) % === ? : autoWidth(), marginBottom: , width:'15%' }}> {item.label}号
提交表单
submit = () => {
const {data,RoomList,checkRoom} = this.state
this.props.history.push({pathname:'/',data:{tab:,roomName:RoomList[checkRoom].label,name:data.name,describe:data.describe,room_category_id:data.id,roomID:RoomList[checkRoom].roomId}})
};
数据解释 ： checkRoom 设置初始值为0 和index一样，所以默认值就是第一个
RoomList[checkRoom].label 第一个房间名（默认）
RoomList[checkRoom].roomId 第一个房间id （默认）
7.传递数据展示
extra： 由于这个页面没有底部的tabs切换栏，所以页面跳转要先跳到Tabs页面 （带数据）
submit = () => {
const {data,RoomList,checkRoom} = this.state
this.props.history.push({pathname:'/',data:{tab:,roomName:RoomList[checkRoom].label,name:data.name,describe:data.describe,room_category_id:data.id,roomID:RoomList[checkRoom].roomId}})
};
然后在Tabs页面把数据传给需要跳转的组件（注意，Tabs是多个组件组成的，tab是我设置的状态，传0就是home，以此类推·····）
正题：
this.state = {
roomTypeValue: [this.props.data&&this.props.data.room_category_id] || [],
roomNoValue: [this.props.data&&this.props.data.roomID] || [],
};
注意：由于房间号是从种类中筛选的，所以不能直接展示，需要先获取roomList，
componentDidMount() {
document.title = '预定'
if(this.props.data&&this.props.data.room_category_id){
this.getRoomList(this.props.data.room_category_id)
}
}
getRoomList(id){
HttpUtils.postForm('/api/room/category/room/list', {
id
}).then(res => {
this.setState({
RoomList:res.data.map(item=>({
label:item.name,
value:item.id,
describe:item.describe
}))
})
}).catch(err =>{
Toast.info(err)
})
}
选择器：
this.setState({
room_category_id: v.toString(),
})
this.getRoomList(v.toString())
}}
>
<List.Item arrow="horizontal" onClick={this.onClick}>房间种类</List.Item>
{/\*<span className={'bottom-line'} />\*/}
</Picker>
表单提交，这里每次提交都会判断，所以应该把选择的房间种类，房间号放在前面，如果他有值，就是你选的，如果没有值，就是从前面页面传过来的
submit = () => {
HttpUtils.postForm('/api/subscribe/room', {
name: this.state.name,
telephone: this.state.mobile,
gender: this.state.gender,
category: this.state.category,
date: moment(this.state.date).format('YYYY-MM-DD'),
user_agent: window.navigator.userAgent,
start_time: moment(this.state.start_time).format('HH:mm:ss'),
end_time: moment(this.state.end_time).format('HH:mm:ss'),
start_date: moment(this.state.start_date).format('YYYY-MM-DD'),
end_date: moment(this.state.end_date).format('YYYY-MM-DD'),
room_id: this.state.room_id || (this.props.data&&this.props.data.roomID) , //每次提交都会判断
room_category_id: this.state.room_category_id || (this.props.data&&this.props.data.room_category_id) , //每次提交都会判断
}).then(res => { if (res.status === ) { Toast.success('提交成功 '); } else { Toast.fail(res.message); } }) };
8.从一个页面传递数据，不需要像第6点一样
传很多，只需要传一个id然后再达到的页面里直接获取数据。
9.使用组件传递数据，不需要一个一个的写，直接传 this.state就可以了
10.如果同时加载页面 ， 会有 存在this.props.store.App.setUser(res.data)中的数据，读取不到的情况，可以使用定时器来获取
this.timer = setTimeout(() => {
this.setState({
genderValue: this.props.store.App.user
? [this.props.store.App.user.gender]
: [],
mobile: this.props.store.App.user.mobile_phone,
name: this.props.store.App.user.name
});
}, );
11.如果只找data中的一个对象，那么就用 find函数，不用map ， 用Number 转换字符串为数字
this.timer = setTimeout(() => {
this.setState({
genderValue: this.props.store.App.user
? [this.props.store.App.user.gender]
: [],
mobile: this.props.store.App.user.mobile_phone,
name: this.props.store.App.user.name
});
}, );
12.自动填充/ 输入 / 选择 只需要一个参数就行了，
name: this.state.name,
telephone: this.state.mobile,
gender: this.state.genderValue\[\],改class也好改，只需要在state中设置genderValu:“” 为空字符串/空值（length为0），
className={
this.props.store.App.user.gender || this.state.genderValue
? "room-picker"
: ""
}
13.React 防止多次点击： 设置一个isClick值为true。if(this.state.isClick){ this.setState({isClick:false}) } 当请求有返回数据的时候，再 设置isClick为true。
14.逻辑没有写错，但是textinput框value 值就是不更新
可能需要加个定时器
componentDidMount() {
TokenAction.loadAddresses()
this.tips()
this.listener = DeviceEventEmitter.addListener('changeQRCodeAccount', (e) => {
this.timer = setTimeout(()=>{
this.setState({account: e})
},)
})
}
手机扫一扫
移动阅读更方便
你可能感兴趣的文章