React Native 在写一个搜索的组件时报错 “null is not an object(evaluating 'this.state.value')”

Question

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
  PixelRatio
} from 'react-native';

var onePT = 1 / PixelRatio.get();

class Search extends Component {
  getInitialState () {
    return {
      show: false
    };
  }

  getValue (text) {
    var value = text ;
    this.setState({
      show: true,
      value: value
    });
  }

  hide (val) {
    this.setState({
      show: false,
      value: val
    });
  }

  render (){
    return (
      <View style={styles.flex}>
        <View style={[styles.flexDirection, styles.inputHeight]}>
          <View style={styles.flex}>
            <TextInput
              style={styles.input}
              returnKeyType="search"
              placeholder="请输入关键字"
              onEndEditing={this.hide.bind(this, this.state.value)}
              value={this.state.value}
              onChangeText={this.getValue}/>
          </View>
          <View style={styles.btn}>
            <Text style={styles.search} onPress={this.hide.bind(this, this.state.value)}>搜索</Text>
          </View>
        </View>
        {this.state.show?
          <View style={[styles.result]}>
            <Text onPress={this.hide.bind(this, this.state.value + '庄')}
                  style={styles.item} numberOfLines={1}>{this.state.value}庄</Text>
            <Text onPress={this.hide.bind(this, this.state.value + '园街')}
                  style={styles.item} numberOfLines={1}>{this.state.value}园街</Text>
            <Text onPress={this.hide.bind(this, 80 + this.state.value + '综合商店')}
                  style={styles.item} numberOfLines={1}>80{this.state.value}综合商店</Text>
            <Text onPress={this.hide.bind(this, this.state.value + '桃')}
                  style={styles.item} numberOfLines={1}>{this.state.value}桃</Text>
            <Text onPress={this.hide.bind(this, '杨林' + this.state.value + '园')}
                  style={styles.item} numberOfLines={1}>杨林{this.state.value}</Text>
          </View>
          : null
        }
      </View>
    );
  }
}

class inputExample extends Component {
  render () {
    return (
      <View style={[styles.flex, styles.topStatus]}>
        <Search></Search>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  flexDirection: {
    flexDirection: 'row'
  },
  topStatus: {
    marginTop: 25
  },
  input: {
    height: 45,
    borderWidth: 1,
    marginLeft: 5,
    paddingLeft: 5,
    borderColor: '#ccc',
    borderRadius: 4
  },
  btn: {
    width: 55,
    marginLeft: -5,
    marginRight: 5,
    backgroundColor: '#23beff',
    height: 45,
    justifyContent: 'center',
    alignItems: 'center'
  },
  search: {
    color: '#fff',
    fontSize: 15,
    fontWeight: 'bold'
  },
  result: {
    marginTop: onePT,
    marginLeft: 5,
    marginRight: 5,
    height: 200,
    borderColor: '#ccc',
    borderTopWidth: onePT,
  },
  item: {
    fontSize: 16,
    padding: 5,
    paddingTop: 10,
    paddingBottom: 10,
    borderWidth:  onePT,
    borderColor: '#ddd',
    borderTopWidth: 0,
  }
});

	AppRegistry.registerComponent('inputExample', () => inputExample);



	第50行也就是
onEndEditing={this.hide.bind(this, this.state.value)}
	

		ios虚拟机显示有问题
	

Answer 1

你如果是 React.createClass 放在 getInitialState里面是对的 但是 你用的是 extends 语法 就得自己写

Answer 2

自己已经解决分享一下经验

在react native用到es6的时候初始化state应该在constructor ()内，而不是用getInitialState()

class Search extends Component {
  constructor () {
    super();
    this.state = {
      ....
    }
  }
  ...
}