TypeError: TypeError: null не является объектом (оценка 'this.state.ischecked1') - PullRequest
Новая
       42

TypeError: TypeError: null не является объектом (оценка 'this.state.ischecked1')

0 голосов
/ 08 февраля 2019

Я вижу вышеупомянутую ошибку, каждый раз, когда я пытаюсь щелкнуть по своим флажкам, я хочу отдельные проверки для четырех флажков, показанных ниже, но я не могу это сделать.Пожалуйста помоги!Код выглядит следующим образом: 

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
  Button,
} from 'react-native';
import { Header, Icon } from 'react-native-elements';
import { Constants } from 'expo';
import { CheckBox } from 'react-native-elements';

import {
  createStackNavigator,
  createNavigatorContainer,
} from 'react-navigation';


export default class UpdateTypes extends React.Component {
  static navigationOptions = {
    title: 'UPDATE TYPES',
    style: {
      display: 'flex',
      flexDirection: 'row',
      backgroundColor: '#FFD700',
    },
  };

  constructor(props) {
        super(props);     

        this.state = {
            ischecked1: true,
            ischecked2: false,
            ischecked3: true,
            ischecked4: false,
        } 
    }  


  onChangeCheck1() {
    this.setState({ ischecked1: !this.state.ischecked1 });
  }
  onChangeCheck2() {
    this.setState({ ischecked2: !this.state.ischecked2 });
  }
  onChangeCheck3() {
    this.setState({ ischecked3: !this.state.ischecked3 });
  }
  onChangeCheck4() {
    this.setState({ ischecked4: !this.state.ischecked4 });
  }

  render() {

    return (
      <View style={styles.container}>
        <View style={styles.innerview}>
          <TouchableOpacity style={styles.options}>
            <Text>Select All</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.options}>
            <Text>Deselect All</Text>
          </TouchableOpacity>
        </View>

        <Text style={styles.writeup}>
          Some random Texts. Below are some checkboxes. Bla Bla Bla!
        </Text>

        <View style={StyleSheet.create({ flex: 1 })}>
          <CheckBox
            center
            title="CheckBoxA"
            checkedIcon="dot-circle-o"
            uncheckedIcon="circle-o"
            value={this.state.ischecked1}
            checked={this.state.ischecked1}
            onPress={this.onChangeCheck1}
          />

          <CheckBox
            center
            title="CheckBoxB"
            checkedIcon="dot-circle-o"
            uncheckedIcon="circle-o"
            checked={this.state.ischecked2}
            value={this.state.ischecked2}
            onPress={this.onChangeCheck2}
          />

          <CheckBox
            center
            title="CheckBoxC"
            checkedIcon="dot-circle-o"
            uncheckedIcon="circle-o"
            checked={this.state.ischecked3}
            value={this.state.ischecked3}
            onPress={this.onChangeCheck3}
          />

          <CheckBox
            center
            title="CheckBoxD"
            checkedIcon="dot-circle-o"
            uncheckedIcon="circle-o"
            value={this.state.ischecked4}
            checked={this.state.ischecked4}
            onPress={this.onChangeCheck4}

          />
        </View>

        <TouchableOpacity style={styles.adsense}>
          <Text>Adsense Ad</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
  },
  options: {
    flex: 1,
    alignItems: 'center',
    borderColor: '#008080',
  },
  writeup: {
    flex: 0.3,
    backgroundColor: '#FFE4B5',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 8,
  },
  innerview: {
    flex: 0.4,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  adsense: {
    flex: 0.55,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#778899',
  },
});

Кроме того, я запутался, когда использовать:

  • onChange
  • onChangeCheck
  • onIconPress
  • onLongPress
  • onPress

Это то же самое, или есть конкретные применения?

Ответы [ 2 ]

0 голосов
/ 08 февраля 2019

Вам необходимо использовать функцию автоматической привязки или стрелки для события onClick флажка. 

    onChangeCheck1 = () => {
    this.setState({ ischecked1: !this.state.ischecked1 });
    }

Он не получает объект this, поскольку контекст, в котором вызывается onClick, отличается.

0 голосов
/ 08 февраля 2019

Одна вещь, которая явно неправильна: замените const state = на this.state=

Кроме того, свяжите функции: 

onPress={this.onChangeCheck1.bind(this)}

Обновленный код (вы можете добавить 'deselectAll' ваналогично «selectAll»): 

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity
} from 'react-native';
import { CheckBox } from 'react-native-elements';


export default class UpdateTypes extends React.Component {
  static navigationOptions = {
    title: 'UPDATE TYPES',
    style: {
      display: 'flex',
      flexDirection: 'row',
      backgroundColor: '#FFD700'
    }
  };

  constructor(props) {
        super(props);

        this.state = {
            ischecked1: true,
            ischecked2: false,
            ischecked3: true,
            ischecked4: false
        };
    }


  onChangeCheck1() {
    this.setState({ ischecked1: !this.state.ischecked1 });
  }
  onChangeCheck2() {
    this.setState({ ischecked2: !this.state.ischecked2 });
  }
  onChangeCheck3() {
    this.setState({ ischecked3: !this.state.ischecked3 });
  }
  onChangeCheck4() {
    this.setState({ ischecked4: !this.state.ischecked4 });
  }

  selectAll() {
    this.setState({
      ischecked1: true,
      ischecked2: true,
      ischecked3: true,
      ischecked4: true
    });
  }

  render() {

    return (
      <View style={styles.container}>
        <View style={styles.innerview}>
          <TouchableOpacity style={styles.options} onPress={this.selectAll.bind(this)}>
            <Text>Select All</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.options}>
            <Text>Deselect All</Text>
          </TouchableOpacity>
        </View>

        <Text style={styles.writeup}>
          Some random Texts. Below are some checkboxes. Bla Bla Bla!
        </Text>

        <View style={StyleSheet.create({ flex: 1 })}>
          <CheckBox
            center
            title="CheckBoxA"
            checkedIcon="dot-circle-o"
            uncheckedIcon="circle-o"
            value={this.state.ischecked1}
            checked={this.state.ischecked1}
            onPress={this.onChangeCheck1.bind(this)}
          />

          <CheckBox
            center
            title="CheckBoxB"
            checkedIcon="dot-circle-o"
            uncheckedIcon="circle-o"
            checked={this.state.ischecked2}
            value={this.state.ischecked2}
            onPress={this.onChangeCheck2.bind(this)}
          />

          <CheckBox
            center
            title="CheckBoxC"
            checkedIcon="dot-circle-o"
            uncheckedIcon="circle-o"
            checked={this.state.ischecked3}
            value={this.state.ischecked3}
            onPress={this.onChangeCheck3.bind(this)}
          />

          <CheckBox
            center
            title="CheckBoxD"
            checkedIcon="dot-circle-o"
            uncheckedIcon="circle-o"
            value={this.state.ischecked4}
            checked={this.state.ischecked4}
            onPress={this.onChangeCheck4.bind(this)}

          />
        </View>

        <TouchableOpacity style={styles.adsense}>
          <Text>Adsense Ad</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    display: 'flex',
    flexDirection: 'column'
  },
  options: {
    flex: 1,
    alignItems: 'center',
    borderColor: '#008080'
  },
  writeup: {
    flex: 0.3,
    backgroundColor: '#FFE4B5',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 8
  },
  innerview: {
    flex: 0.4,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },
  adsense: {
    flex: 0.55,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#778899'
  }
});
...