React Native - Использование State для отображения / скрытия сообщений об ошибках - PullRequest
Новая
       5

React Native - Использование State для отображения / скрытия сообщений об ошибках

0 голосов
/ 27 апреля 2020

Создавая небольшое приложение Todo для React Native на основе учебника, я хочу добавить сообщение об ошибке в приложение, если пользователь пытается сохранить список без каких-либо символов.

Я создал сообщение, состояние и условие для состояния, связанного с представлением, содержащим сообщение. Хотя теперь пользователь вообще не может сохранить список, и сообщение об ошибке постоянно отображается. 

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

Ответы [ 2 ]

0 голосов
/ 27 апреля 2020

вы можете реализовать так 

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>
        );
    }
0 голосов
/ 27 апреля 2020

Вы можете использовать условный рендеринг вместо свойства visible. 

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>
    );
}
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...