使用 onChangeText 方法遇到错误(已解决)



  • 由于刚刚学习,视频教程有点老,写法不太一样,所以在学习 TextInput 的时候遇到了问题。
    需求是点击按钮,弹出 alert 显示输入框的文本。报的错误是 'Cannot read property 'text' of undefined'。
    代码如下,希望大家能指点一下哪里写的有问题。

    export default class LessonTextInput extends Component {
      constructor(props){
        super(props);
        this.state = {inputText: ""};
      }
      clickBtn() {
        alert(this.state.inputText);
      }
      render() {
        return (
            <View style={styles.container}>
              <View style={styles.flex}>
                <TextInput
                  style={styles.input}
                  returnKeyType="search"
                  placeholder="请输入内容"
                  underlineColorAndroid="transparent"
                  onChangeText={(text) => this.setState({inputText: text})}
                />
              </View>
              <TouchableOpacity style={styles.btn} onPress={this.clickBtn.bind(this)}>
                <Text style={styles.search}>搜索</Text>
              </TouchableOpacity>
            </View>
        );
      }
    }
    

    以上已改成正确代码,还有一种晴明老师提供的箭头函数写法:

    clickBtn = () => {
        alert(this.state.inputText);
      }
    ...
    onPress={this.clickBtn}
    


  • 顶一顶,希望能有大神来解答



  • @ayuhani 说:

    onChangeText={(text) => this.setState({inputText:text})}



  • 首先,需要把:

    value={this.state.inputText}

    加入 TextInput 标签,然后,如上修改onChangeText。



  • @CandyKTN 尝试了下,还是不可以,新的错误:undefined is not an object(evaluating 'this.state.inputText')



  • @tsfosnz 尝试了下,还是不可以,新的错误:undefined is not an object(evaluating 'this.state.inputText')


  • administrators

    clickBtn = () => {
    alert(this.state.inputText);
    }



  • @ayuhani 改这两句:onChangeText={(inputText) => this.setState({inputText}); onPress={this.clickBtn.bind(this)};



  • @Cbinbin
    这个可以。但是个人有点想法,讨论下。

    onChangeText={(value) => this.setState({inputText:value});
    这样会让新手误解,onChangeText是回调函数,value只是onChangeText函数的形参,既当前输入框的值。this.setState()是处理value的语句。莫要把inputText这个形参和当前state的值inputText混淆。



  • @晴明 此方法可行,多谢老师



  • @Cbinbin @ Sumrocks 感谢,已经解决


登录后回复