【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:
}
<Text>{this.state.balance?(this.state.balance / ).toFixed():'0.00'}</Text>
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) => (
<div
key={index}
onClick={() => {
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}号 </div> )) : null}
提交表单
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)
})
}
选择器：
<Picker
extra={'请选择房间类型'}
title={'房间类型'}
data={this.state.roomCategoryList}
cols={this.state.cols}
value={this.state.roomTypeValue} 这个值就是选择器选择的值，也可以当做默认值，在state的时候已经设置了
onPickerChange={this.onPickerChange2}
onOk={v => {
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就可以了
<CommonModal visible={this.state.visible} title={'确认信息'} btnText={'返回修改'} data={''}
onOk={this.state.checkType === ? this.submit1 : this.submit2}
onCancel={this.onCancel} placeText={this.state.remark}
confirmInfo={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})
},)
})
}
【JS】逻辑处理的更多相关文章
- 微信小程序-06-详解介绍.js 逻辑层文件-注册页面
上一篇介绍的是 app.js 逻辑层文件中注册程序,对应的每个分页面都会有的 js 文件中 page() 函数注册页面 微信小程序-06-详解介绍.js 逻辑层文件-注册页面 宝典官方文档: http ...
- 微信小程序-05-详解介绍.js 逻辑层文件
上一篇介绍了关于.json 的配置文件,本篇介绍关于.js 逻辑层文件 微信小程序-05-详解介绍.js 逻辑层文件 宝典官方文档: https://developers.weixin.qq.com/ ...
- JS 逻辑
JS 逻辑 Boolean(逻辑)对象用于将非逻辑值转换为逻辑值(true 或者 false). Boolean 对象 您可以将 Boolean 对象理解为一个产生逻辑值的对象包装器. Boolean ...
- 微信小程序 js逻辑
}) 页面 Page() 函数用来注册一个页面.接受一个 object 参数,其指定页面的初始数据.生命周期函数.事件处理函数等. data 页面的初始数据,data 将会以 JSON 的形式由逻辑层 ...
- js 逻辑或
逻辑或操作符由两个竖线来表示||,属于短路操作符,也就是说,如果第一个操作数的求职结果为true,就不会对第二个操作数进行求值 var found = true; var result = found ...
- js逻辑与，或，非
[转,未整理] 1.逻辑非(!) 如果一个操作数是一个对象,返回true; 如果一个操作数是一个空字符串,返回false; 如果一个操作数是一个非空字符串,返回false; 如果一个操作数是一个数值0 ...
- 浏览器的自动翻译会影响 JS 逻辑
有人在 QQ 群里反馈,官方注册后跳转时出现 Bug. 收到群友非常有用的资讯,这是因为浏览器的自动翻译功能引起的. 11:04:21[潜水]Better Command 2017/12/30 11: ...
- JS逻辑题 技术点： 1). 变量提升 2). 函数提升 3). 预处理 4). 调用顺序
考查的技术点: 1). 变量提升 2). 函数提升 3). 预处理 4). 调用顺序 var c = 1; function c(c) { console.log(c); var c = 3; ...
- js逻辑非同时两次使用 !!null
今天遇到了“!!null”的写法,百度没有找到直接的解释,翻书在<javascript高级设计>P44找到了相应的解释: 同时使用两个逻辑非操作符,实际上就会模拟Boolean()转型函数 ...
- 用户注册页的布局及js逻辑实现（正则，注册按钮）
文章地址:https://www.cnblogs.com/sandraryan/ 先写一个简单的静态页面,然后对用户输入的内容进行验证,判断输入的值是否符合规则,符合规则进行注册 先上静态页面 < ...
随机推荐
- linux的计划任务操作
1.cron服务来设置 计划任务查看与设置命令:crontab 包括条目: 分钟m:0-59 小时h:0-23 月日dom:1-31 月份mon:1-12 星期dow:0-7 例子: 每隔2小时处理一 ...
- （8）打鸡儿教你Vue.js
监听属性 监听属性 watch 通过 watch 来响应数据的变化 <div id = "app"> <p style = "font-size:25p ...
- Subspace Subcode
子码(subcode)的概念来自信息编码,不太容易理解.通常是子域编码(subfield subcode),也可以扩展到子空间编码(subspace subcode). 子空间或者子域编码的一个基本想 ...
- jmeter非GUI界面常用参数详解
压力测试或者接口自动化测试常常用到的jmeter非GUI参数,以下记录作为以后的参考 讲解:非GUI界面,压测参数讲解(欢迎加入QQ群一起讨论性能测试:537188253) -h 帮助 -n 非GUI ...
- Pytest权威教程12-跳过(Skip)及预期失败(xFail): 处理不能成功的测试用例
目录 跳过(Skip)及预期失败(xFail): 处理不能成功的测试用例 Skip跳过用例 xFail:将测试函数标记为预期失败 Skip/xFail参数设置 返回: Pytest权威教程 跳过(Sk ...
- ZR#1005
ZR#1005 解法: 题解给了一个建图跑最短路的做法,但好像没有必要,因为 $ m $ 没有用,所以直接上完全背包就行了. CODE: #include<iostream> #inclu ...
- FLUENT不同求解器离散格式选择【转载】
转载自:http://blog.163.com/wu_yangfeng/blog/static/16189737920104158950438/ 离散格式对求解器性能的影响 控制方程的扩散项一般采用中 ...
- spark_API
1.概述 总的来讲,每一个spark驱动程序应用都由一个驱动程序组成,该驱动程序包含一个由用户编写的main方法,该方法会在集群上执行一些并行计算操作.Spark最重要的一个概念是弹性分布式数据集,简 ...
- book-rev8
xv6 a simple, Unix-like teaching operating system 一个简易.类Unix教学操作系统 Russ Cox Frans Kaashoek Robert Mo ...
- 三大框架 之 Hibernate生成策略与缓存策略（主键生成策略、持久化、持久化类划分、一级缓存、事物管理）
目录 Hibernate生成策略与缓存策略 主键生成策略 主键分类 主键的生成策略 持久化 什么是持久化 什么是持久化类 持久化类编写规则 持久化类的划分 三种状态区分 持久态对象特征 一级缓存 什么 ...