【发布时间】：2020-06-13 15:22:40
【问题描述】：
import React , {Component} from 'react';
import { StyleSheet, Text, View, ScrollView, SafeAreaView, TextInput,Button} from 'react-native';
import Constants from 'expo-constants';
import DatePicker from 'react-native-datepicker';
export default class Asst extends Component {
constructor(props) {
super(props);
this.state = {
"email": "hh@gmail.com",
"goal": "Aptitude",
"tasks": [
{
"skillName": "Linear ALgebra",
"start_date": "05-05-2020 11:07",
"end_date": "05-11-2020 11:20",
},
{
"skillName": "Ratios",
"start_date": "10-09-2020 11:00",
"end_date": "14-05-2020 07:00",
}
],
};
this.AddSkill = this.AddSkill.bind(this);
this.handleChanged = this.handleChanged.bind(this);
}
AddSkill(skill) {
console.log("added task");
this.state.tasks.push(skill);
this.setState({tasks: this.state.tasks})
}
handleChanged(event) {
this.setState({goal: event});
}
onsave=()=>{
alert('Ready to save');
}
listitem(){
return this.state.tasks.map((t) => {
return (
<View>
<ScrollView>
<ScrollView horizontal={true} style={{paddingBottom:20,paddingTop:20,borderColor:'black'}}>
<Text>
<Text style={{fontSize:20}}>{t.skillName+" "}</Text>
<Text style={{fontSize:20,backgroundColor:'springgreen'}}>{t.start_date+" "}</Text>
<Text style={{fontSize:20,backgroundColor:'lightsalmon'}}>{t.end_date}</Text>
</Text>
</ScrollView>
</ScrollView>
</View>
)
})
}
render() {
return (
<SafeAreaView style={styles.container}>
<Text style={styles.title}></Text>
<View>
<TaskNameForm onAddTask={this.AddSkill} />
<Text style={styles.title}>{this.state.goal}</Text>
<ScrollView horizontal={true} style={{paddingBottom:20,paddingTop:20,borderColor:'black'}}>
<Text>
<Text style={{fontSize:20}}>Task Name </Text>
<Text style={{fontSize:20,backgroundColor:'springgreen'}}> Start Date </Text>
<Text style={{fontSize:20,backgroundColor:'lightsalmon'}}> End Date </Text>
</Text>
</ScrollView>
</View>
<View>
<ScrollView vertical={true}>
{this.listitem()}
</ScrollView>
</View>
<Button
title="SAVE"
onPress={this.onsave}
/>
</SafeAreaView>
);
}
}
export class TaskNameForm extends Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.dateChange = this.dateChange.bind(this);
}
handleSubmit(event) {
const skillList = this.props.skillList;
event.preventDefault();
const skill = {id:Date.now(),name: this.state.TextInputvalue,
dueDate: new Date(),date:this.state.date,date1:this.state.date1};
this.props.onAddTask(skill);
this.setState({TextInputvalue:''})
}
handleChange(event) {
this.setState({TextInputvalue: event});
}
componentHideAndShow = () => {
this.setState(previousState => ({ content: !previousState.content }))
}
dateChange(event){
this.setState({date :event.target.value});
this.setState({date1 :event.target.value});
}
render() {
return(
<View>
<TextInput
style={{height: 40,backgroundColor: 'azure', fontSize: 20}}
placeholder={'Enter'}
value={this.state.TextInputvalue}
onChangeText={this.handleChange}
/>
<DatePicker
style={{width: 300}}
date={this.state.date}
mode="datetime"
placeholder="start date"
format="DD-MM-YYYY hh:mm"
minDate="01-01-2020"
maxDate="01-01-2030"
confirmBtnText="Done"
cancelBtnText="Cancel"
customStyles={{
dateInput: {
marginLeft: 36
}
}}
onDateChange={(date) => {this.setState({date: date})}}
/>
<DatePicker
style={{width: 300}}
date={this.state.date1}
mode="datetime"
placeholder="end date"
format="DD-MM-YYYY hh:mm"
minDate="01-01-2020"
maxDate="01-01-2030"
confirmBtnText="Done"
cancelBtnText="Cancel"
customStyles={{
dateInput: {
marginLeft: 36
}
}}
onDateChange={(date) => {this.setState({date1: date})}}
/>
<Button
title="Submit"
onPress={this.handleSubmit}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
marginTop: Constants.statusBarHeight,
backgroundColor: 'white',
width: '100%',
paddingVertical: 20,
paddingHorizontal: 10,
alignContent:'center',
position: 'absolute',
top: 0, left: 0,
right: 0, bottom: 0,
},
title:{
fontSize:30,
},
containers: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between'
},
textInput: {
width: '90%',
marginLeft: 10,
marginRight: 10,
marginBottom: 30,
borderColor: 'gray',
borderBottomWidth: 2,
fontSize: 16,
}
});
这是我得到的输出：
就像我尝试添加时一样，它显示为未定义。
【问题讨论】：
-
目前还不清楚实际问题是什么。另外，您能否提供一个最小、完整且可验证的示例？
标签： json react-native