根据其他字段的值禁用字段

时间:2018-02-28 22:34:30

标签: javascript react-native tcomb

我正在尝试实现一个基本功能,以根据另一个字段的值禁用字段。这是代码示例:

import React from 'react'
import t from "tcomb-form-native";
import {Text, View, TextInput, TouchableHighlight } from 'react-native';

const Form = t.form.Form;

var Type = t.struct({
  disable: t.Boolean, // if true, name field will be disabled
  name: t.String
});

var options = {
  fields: {
    name: {}
  }
};

export default class App extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      options: options,
      value: null
    }
  }

  onChange(value) {
    var newOptions = t.update(this.state.options, {
      fields: {
        name: {
          editable: {'$set': !value.disable}
        }
      }
    });
    this.setState({options: newOptions, value: value});
  }

  onPress() {
    var value = this.refs.form.getValue();
    if (value) {
      console.log(value);
    }
  }

  render() {
    return (
      <View style>
        <Form
          ref="form"
          type={Type}
          options={this.state.options}
          value={this.state.value}
          onChange={this.onChange}
        />
        <TouchableHighlight style onPress={this.onPress} underlayColor='#99d9f4'>
          <Text style>Save</Text>
        </TouchableHighlight>
      </View>
    )
  };

}; 

当我运行给定代码时,我遇到以下错误TypeError: undefined is not an object (evaluating 'this.state.options')。 这是一个非常基本的例子,因为我仍然是一个新手,我试图理解这个代码示例是如何工作的。 任何帮助表示赞赏。 感谢。

1 个答案:

答案 0 :(得分:0)

es6类不能自动提取,如果你使用属性初始值设定项,它会将this范围扩展到你的类:

onChange = (value) => {
  //
}