Javascript 反应本机：无法从窗体值设置状态

我正在尝试使用tcomb form Native组件在React Native中构建一个简单的登录表单。我创建了handleChange方法，用于将值设置为初始状态，并创建了handleForm用于提交。现在，在我的代码中，当我在输入字段中键入内容时，内容被删除并替换为占位符（无控制台输出），当我按下提交按钮时，我收到错误“undefined不是对象（评估此.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
    }
  }
};

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>
    );
}

以下是我的类和方法：

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);
}

这就是我呈现一切的方式：

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
    }
  }
};

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>
    );
}

render（）{
返回(
登录
this.form=f}
类型={User}
选项={options}
onChangeText={（value）=>this.setState（{value}）}
value={this.state.value}
/>
登录
);
}

在

TouchableHightlight

中，您需要将：

onPress={this.handleSubmit}

定义为：

onPress={（）=>this.handleSubmit（）}

或

onPress={this.handleSubmit.bind（this）}

此外，

ref

现在不应是React（+Native）（）中的字符串，但例如：

ref={（f）=>this.form=f}

然后用

this.form

那么你可以这样做

onPress={this.handleSubmit}

handleSubmit = () => {...}

---

非常感谢您的回答，但不幸的是，我还无法测试它，因为我无法修复handleChange，目前我在输入字段中添加的所有内容都会自动删除并显示占位符。。。我试着从上面使用相同的原理，但看起来没有。我用我最后的修改修改了上面的代码。看起来它不再删除它们了，但是我的模拟器现在停止工作了，所以我还没有控制台来测试它。我成功了，文本的问题是我绑定到了一个空变量，你的回答帮助我理解onPress方法。谢谢你的帮助！