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

Posted 2023-02-22

【中文标题】React Native - 使用状态显示/隐藏错误消息

【英文标题】：React Native - Using State to Show/Hide Error Messages

【发布时间】：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)
    

【问题讨论】：

***.com/a/30268190/11980251

【参考方案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>
    );

【讨论】：

这个正在工作（有点！）。我已经使用您的答案篡改了 if 语句，现在出现错误消息，但仍然阻止保存列表

您不想阻止用户进入保存列表？或者这个解决方案有什么问题？

如果没有输入，我想阻止用户保存列表，并允许他保存列表，前提是输入至少一个字符。现在，无论输入如何，只要点击保存按钮，错误消息就会隐藏并出现 - 更新上面的代码。

仅当输入为空时才将 errorState 更改为 true，否则保持为 false。

【参考方案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>
        );
    

【讨论】：

你的解决方案和上面的没有什么不同

当我写解决方案时，我发现这里的答案与我的答案相同