【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/ 先写一个简单的静态页面,然后对用户输入的内容进行验证,判断输入的值是否符合规则,符合规则进行注册 先上静态页面 < ...
随机推荐
- C语言实现的简单银行存取款程序 请输入如下数字命令
#include <stdio.h> int main(void) { //提供变量 cmd balance(余额) deposit(存款) withdraw(取款) //利用while做 ...
- P1453 城市环路
题目背景 一座城市,往往会被人们划分为几个区域,例如住宅区.商业区.工业区等等.B市就被分为了以下的两个区域——城市中心和城市郊区.在着这两个区域的中间是一条围绕B市的环路,环路之内便是B市中心. 题 ...
- LOJ6071. 「2017 山东一轮集训 Day5」字符串 [SAM]
LOJ 思路 这种计数题显然是要先把每一个合法的串用唯一的方法表示出来.(我连这都没想到真是无可救药了) 如何唯一?容易想到把前缀尽可能多地在第一个串填掉,然后填第二个,第三个-- 如何做到这样?可以 ...
- mapper.xml等资源导入的问题
在pom.xml中的下导入如下字段 <resources> <resource> <directory>src/main/java</directory> ...
- python 链表的反转
code #!/usr/bin/python # -*- coding: utf- -*- class ListNode: def __init__(self,x): self.val=x self. ...
- 初识kubernetes
Kubernetes最初源于谷歌内部的Borg,提供了面向应用的容器集群部署和管理系统.Kubernetes 的目标旨在消除编排物理/虚拟计算,网络和存储基础设施的负担,并使应用程序运营商和开发人员完 ...
- postman上传excel，java后台读取excel生成到指定位置进行备份，并且把excel中的数据添加到数据库
最近要做个前端网页上传excel,数据直接添加到数据库的功能..在此写个读取excel的demo. 首先新建springboot的web项目 导包,读取excel可以用poi也可以用jxl,这里本文用 ...
- etcd,flannel,docker relationship---and k8s
journalctl -xe voidcn.com/article/p-qufvdmpq-bqn.html etcd more etcd.confETCD_NAME=default ETCD_DATA ...
- oracle tablespace pctfree pctused
二.oracle pctfree和pctused详解 一.建立表时候,注意PCTFREE参数的作用 PCTFREE:为一个块保留的空间百分比,表示数据块在什么情况下可以被insert,默认是10,表示 ...
- 磁盘性能指标--IOPS与吞吐量
磁盘性能指标--IOPS---------------------------------------------------------- IOPS (Input/Output Per ...