【发布时间】：2020-08-10 18:01:56
【问题描述】：
一直在根据教程在 React Native 上构建一个小型 Todo 应用程序，如果用户尝试保存没有任何字符的列表，我想向应用程序添加一条错误消息。
我已经创建了消息、状态和链接到包含消息的视图的状态的条件。虽然现在，用户根本无法保存列表，并且错误消息始终可见。
export default class AddTodoModal extends React.Component {
backgroundColors = ['#171219', '#225560', 'grey', '#EDF060', '#F0803C', '#310D20']
state = {
name: '',
color: this.backgroundColors[0],
errorState: false
};
createTodo = () => {
const {name, color} = this.state
if ({name}.length > 0) {
tempData.push({
name,
color,
todos: []
})
}
return
this.setState({name: ""})
this.props.closeModal();
}
renderColors() {
return this.backgroundColors.map(color => {
return (
<TouchableOpacity
key={color}
style={[styles.colorSelect, {backgroundColor: color}]}
onPress={() => this.setState({color})}
/>
);
});
}
render() {
return(
<KeyboardAvoidingView style={styles.container} behavior="padding">
<TouchableOpacity style={{position: 'absolute', top: 64, right: 32}} onPress={() => this.props.closeModal()}>
<AntDesign name="close" size={24} color={colours.blue} />
</TouchableOpacity>
<View visible={this.state.errorState}>
<Text style={styles.errorMessage}>Please Enter a Value!</Text>
</View>
<View style={{alignSelf: 'stretch', marginHorizontal: 32}}>
<Text style={styles.title}>Create Todo List</Text>
<TextInput style={styles.input} placeholder="List Name?" onChangeText={text => this.setState({ name: text })}/>
<View style={{flexDirection: 'row', justifyContent: 'space-between', marginTop: 12 }}>{this.renderColors()}</View>
<TouchableOpacity style={[styles.createList, { backgroundColor: this.state.color}]}
onPress={this.createTodo}>
<Text style={styles.buttonText}>Create List</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
);
}
}
更新：
有了下面的答案，现在会出现错误消息，但保存列表被阻止，即使输入有效。
export default class AddTodoModal extends React.Component {
backgroundColors = ['#171219', '#225560', 'grey', '#EDF060', '#F0803C', '#310D20']
state = {
name: '',
color: this.backgroundColors[0],
errorState: false
};
createTodo = () => {
const {name, color} = this.state
if ({name}.length > 0) {
tempData.push({
name,
color,
todos: []
})
this.setState({name: ""})
this.setState({errorState: false})
this.props.closeModal();
} else {
({name}.length = 0)
this.setState({errorState: true})
return
}
}
renderColors() {
return this.backgroundColors.map(color => {
return (
<TouchableOpacity
key={color}
style={[styles.colorSelect, {backgroundColor: color}]}
onPress={() => this.setState({color})}
/>
);
});
}
render() {
return(
<KeyboardAvoidingView style={styles.container} behavior="padding">
<TouchableOpacity style={{position: 'absolute', top: 64, right: 32}} onPress={() => this.props.closeModal()}>
<AntDesign name="close" size={24} color={colours.blue} />
</TouchableOpacity>
{this.state.errorState && <View>
<Text style={styles.errorMessage}>Please Enter a Value!</Text>
</View>}
<View style={{alignSelf: 'stretch', marginHorizontal: 32}}>
<Text style={styles.title}>Create Todo List</Text>
<TextInput style={styles.input} placeholder="List Name?" onChangeText={text => this.setState({ name: text })}/>
<View style={{flexDirection: 'row', justifyContent: 'space-between', marginTop: 12 }}>{this.renderColors()}</View>
<TouchableOpacity style={[styles.createList, { backgroundColor: this.state.color}]}
onPress={this.createTodo}>
<Text style={styles.buttonText}>Create List</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
);
}
}
更新：
修复 if 语句以正确显示错误消息
createTodo = () => {
const {name, color} = this.state
let nameLength = this.state.name.length;
if (nameLength > 0) {
this.setState({errorState: false})
tempData.push({
name,
color,
todos: []
})
this.setState({name: ""})
this.props.closeModal();
} else {
(nameLength === 0)
this.setState({errorState: true})
}
}
【问题讨论】：