【问题标题】:Undefined TextInput Value未定义的文本输入值
【发布时间】:2017-10-05 09:16:25
【问题描述】:

我想从文本输入中提交值,但是当我 console.log 时,之前输入的文本是未定义的。我已经按照react native get TextInput value 的说明进行操作,但仍未定义。

这是我之前的状态:

this.state = {
  comment_value: '',
  comments: props.comments
}

submit = (args) => {
  this.props.submit(args.comment_value)
}

这是提交文本的功能:

addComment () {

var comment_value = this.state.comment_value
console.log('success!', comment_value)
})

this.props.submit('410c8d94985511e7b308b870f44877c8', '', 'e18e4e557de511e7b664b870f44877c8')

}

这是我的文本输入代码:

<TextInput
underlineColorAndroid='transparent'
placeholder='Enter your comment here'
multiline numberOfLines={4}
   onChangeText={(text) => this.setState({comment_value: text})}
                value={this.state.comment_value}
                style={styles.textinput}

      />
            </View>
            <TouchableOpacity onPress={this.addComment.bind(this)}>
              <View style={{flex: 1, flexDirection: 'column', backgroundColor: Colors.background, width: 70}}>
                <Icon name='direction' type='entypo' color='#000'size={30} style={styles.icon} />
              </View>
            </TouchableOpacity>

【问题讨论】:

    标签: javascript react-native react-native-android


    【解决方案1】:

    这肯定会起作用,尝试像这样清理您的代码

    contructor(props) {
       super(props);
       this.state = {
          comment_value: '',
       }
    }
    
    addComment () {
      console.log(this.state.comment_value); // should be defined
      this.props.submit(this.state.comment_value);
    }
    
    render() {
        return (
          <View>
              <TextInput
                 underlineColorAndroid='transparent'
                 placeholder='Enter your comment here'
                 multiline numberOfLines={4}
                 value={this.state.comment_value}
                 onChangeText={(text) => this.setState({comment_value: text})}
                 style={styles.textinput}
              />
    
              <TouchableOpacity onPress={this.addComment.bind(this)}>
                  <View style={{flex: 1, flexDirection: 'column', backgroundColor: Colors.background, width: 70}}>
                      <Icon name='direction' type='entypo' color='#000'size={30} style={styles.icon} />
                  </View>
              </TouchableOpacity>
          </View>
        );
    }
    

    编辑:根据您的完整代码示例,您似乎错误地尝试通过执行多个 this.state = ... 来更新状态,这是不正确的,要更新状态,您必须使用 this.setState({ ... })

    【讨论】:

    • 我这样写 this.props.submit('410c8d94985511e7b308b870f44877c8', ' ', 'e18e4e557de511e7b664b870f44877c8') 因为我要测试数据是否成功发布到服务器
    • 是的,仍然未定义。
    • 您可以在测试您的输入是否显示时将其注释掉,我复制了我发布的代码,它应该可以正常工作,您能否发布您的整个页面包含该代码,因为问题来自其他地方
    • 它不起作用,因为你有很多 this.state = { ... } 本质上你正在失去你的 comment_value 只是因为你一遍又一遍地用不同的方式重新初始化状态特性。您应该只初始化一次状态,然后使用 this.setState({ .. }) 更新它
    • 哦,明白了!但是,你能写代码吗?我是反应原生的新手。并且仍然对 state 和 this.setState 感到困惑:)
    猜你喜欢
    • 2019-05-01
    • 2017-08-02
    • 2015-04-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-11-12
    • 2020-07-05
    相关资源
    最近更新 更多