当文本由React Native中的可重用组件填充时启用按钮

Question

我希望在输入文本填满后启用导航按钮；但是，为了保持统一的样式，我创建了可重用的文本输入，称为“ InputBox”，以及转发按钮，称为“ ForwardButton”。在不使用可重用组件InputBox的情况下，我能够成功启用前进按钮。我的ForwardButton.js出了点问题，但我找不到原因。

在我的index.js中：

export default class NamePage extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      btnLocation: 10,
      firstName: '',
      lastName: '',
    }
  }

  render() {
    const { firstName, lastName } = this.state;
    const {
      navigation: { navigate },
    } = this.props
    return (
      <View>
        <Text style={styles.titleText}>What's Your Name?</Text>

        <InputBox
          style={styles.textInput}
          auotCorrect={false}
          placeholder="Input Your First Name"
          placeholderColor="white"
          clearButtonMode="always"
          onChangeText={(firstName) => this.setState({ firstName })}
          value={firstName}
        >
          First Name
        </InputBox>
        <InputBox
          style={styles.textInput}
          auotCorrect={false}
          placeholder="Input Your Last Name"
          placeholderColor="white"
          clearButtonMode="always"
          onChangeText={(lastName) => this.setState({ lastName })}
          value={lastName}
        >
          Last Name
        </InputBox>
        <ForwardButton
          bottomHeight={this.state.btnLocation}
          onPress={() => navigate('EmailPage')}
          disabled={!firstName || !lastName}
        />
      </View>
    )
  }
}

在可重用的InputBox.js中

import React from 'react'
import { View, TextInput, Text } from 'react-native'
import { styles } from '../styles/InputBox'

const InputBox = props => (
  <View style={styles.inputView}>
    <Text style={styles.inputTitle}>{props.children}</Text>
    <TextInput
      style={styles.inputText}
      auotCorrect={props.autoCorrect}
      placeholder={props.placeholder}
      clearButtonMode={props.clearButtonMode}
      onChangeText={props.changeText}
      value={props.value}
    />
  </View>
)

export { InputBox }