React-Native：無法從表單值設置狀態

Question

我正嘗試使用tcomb-form-native組件在React-Native中構建一個簡單的登錄表單。我已經創建了方法handleChange，用於將值設置爲初始狀態以及用於提交的handleForm。現在，當我在輸入字段中輸入內容時，內容被刪除並用佔位符（無控制檯輸出）替換，當我按提交按鈕時，出現錯誤「未定義不是對象（評估此.refs.form）」。有沒有更好的方法來做到這一點？

這是我如何導入和設置的一切：

import React, { Component } from 'react'; 

import { 
    Text, 
    View, 
    StyleSheet, 
    TextInput, 
    TouchableHighlight, 
    ActivityIndicator, 
    Image 
} from 'react-native'; 

var t = require('tcomb-form-native'); 

var Form = t.form.Form; 

var User = t.struct({ 
    username: t.String, 
    password: t.String 
}); 

var options = { 
    auto: 'placeholders', 
    fields: { 
    password: { 
     password: true 
    } 
    } 
}; 

這裏是我的類和方法：

class Login extends Component { 
constructor(props) { 
    super(props); 
    this.state = { 
     value: { 
      username: '', 
      password: '' 
     }, 
     isLoading: false, 
     error: false 
    }; 
    this.handleChange.bind(this); 
} 
handleChange(value) { 
    this.setState({value}); 
} 
handleSubmit() { 
    var value = this.refs.form.getValue(); 
    //update the indicator spinner 
    this.setState({ 
     isLoading: true 
    }); 
    console.log(value); 
} 

這該是多麼即時渲染的一切：

render() { 
    return (
     <View style={styles.mainContainer}> 
      <View style={styles.logo}> 
       <Image source={require('../icon.png')} /> 
      </View> 
      <Text style={styles.title}>Login</Text> 
      <Form 
       ref={(f) => this.form = f} 
       type={User} 
       options={options} 
       onChangeText={(value) => this.setState({value})} 
       value={this.state.value} 
      /> 
      <TouchableHighlight 
       style={styles.button} 
       onPress={this.handleSubmit} 
       underlayColor="white"> 
        <Text style={styles.buttonText}>LOGIN</Text> 
      </TouchableHighlight> 
     </View> 
    ); 
} 

Answer 1

Don't Use Bind When Passing Props

那麼你可以做這樣的

onPress={this.handleSubmit} 

handleSubmit =() => {...} 

Answer 2

在TouchableHightlight中，您需要將onPress={this.handleSubmit}定義爲：

onPress={() => this.handleSubmit()}或

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

此外，ref不應該是字符串時下作出反應（+母語）（https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute），但如：

ref={(f) => this.form = f}

，然後你參考與它this.form。