Question

我正在尝试使用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
    }
  }
};

以下是我的课程和方法：

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现在不应该是React（+ Native）（https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute）中的字符串，但是例如：

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

然后用this.form引用它。

React-Native：无法从表单值设置状态

2 个答案: