React Native-使用状态显示/隐藏错误消息

Question

我一直在根据教程在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})
}
}

Answer 1

您可以使用条件渲染而不是可见属性。

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>
{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>
);
}
}

Answer 2

您可以像这样实现

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> :null}
<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>
);
}