Question

我有一个反应原生屏幕，默认添加2个文本输入，而仅按下按钮时添加2个文本输入。

我可以在前2个文本输入中添加文本，但是其他2个不接受文本，只有在再次按下“添加其他汽车”按钮时才接受文本。

我错过了什么？为什么在添加文本时不会重新渲染视图。

CarReg.js

'use strict';
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput
} from 'react-native';
var Button = require('./Button');
var Parse = require('parse/react-native');

class CarReg extends Component {

  constructor(props) {
  super(props);
  this.state = {
  carNumber1: "",
  carState1: "",
  carNumber2: "",
  carState2: "",
  errorMessage: "",
  carEntry: <View/>,
};
  }

render() {
const { page } = this.state;
return (
  <View style={styles.container}>
    <Text
      style={[styles.titleContainer, {marginBottom: 30}]}>
      Please register your cars, you can add up-to 2 cars </Text>
    <Text style={styles.titleContainer}> License plate number: </Text>
    <TextInput
      style={styles.textInputContainer}
      onChangeText={(text) => this.setState({carNumber1: text})}
      value={this.state.carNumber1}/>
    <Text style={styles.titleContainer}> State: </Text>
    <TextInput
      style={styles.textInputContainer}
      onChangeText={(text) => this.setState({carState1: text})}
      value={this.state.carState1}/>
    {this.state.carEntry}
    <Text>{this.state.errorMessage}</Text>
    <Button text="Add another car" onPress={this.onAddCarPress.bind(this)}/>
    <Button text="Submit" onPress={this.onSubmitPress.bind(this)}/>
    <Button text="I don't have a car" onPress={this.onNoCarPress.bind(this)}/>
  </View>
);
  }
  onAddCarPress() {
this.setState({carEntry:
  <View style={styles.addCarView}>
      <Text style={styles.titleContainer}> License plate number: </Text>
      <TextInput
        style={styles.textInputContainer}
        onChangeText={(text) => this.setState({carNumber2: text})}
        value={this.state.carNumber2}/>
      <Text style={styles.titleContainer}> State: </Text>
      <TextInput
        style={styles.textInputContainer}
        onChangeText={(text) => this.setState({carState2: text})}
        value={this.state.carState2}/>
  </View>
  })
  }
  onSubmitPress() {
   this.props.navigator.push({name: 'main'});
  }
  onNoCarPress() {
   this.props.navigator.push({name: 'main'});
 }
 }

 const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'center',
 backgroundColor: '#F5FCFF',
 },
 addCarView: {
 backgroundColor: '#F5FCFF',
 justifyContent: 'center',
 alignItems: 'center',
 },
 titleContainer: {
 fontSize: 20,
 fontFamily: 'Helvetica',
 },
 textInputContainer: {
 padding: 4,
 margin: 5,
 borderWidth: 1,
 borderRadius: 10,
 width: 200,
 height: 40,
 fontFamily: 'Helvetica',
 alignSelf: 'center',
 marginBottom: 10,
 marginTop: 10,
 },
 });

 module.exports = CarReg;

Button.js

'use strict';
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  TouchableHighlight,
} from 'react-native';

class Button extends Component {

  constructor(props) {
  super(props);
}

render() {
  return (
    <TouchableHighlight
      style={styles.container}
      onPress={this.props.onPress}
      underlayColor ='gray'>
      <Text style={styles.textContainer}>{this.props.text}</Text>
    </TouchableHighlight>
 );
 }
 }

 const styles = StyleSheet.create({
   container: {
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: '#F5FCFF',
    marginTop: 10,
    padding: 5,
    borderWidth: 1,
    borderRadius: 10,
  },
  textContainer: {
    fontFamily: 'Helvetica',
    justifyContent: 'center',
    alignSelf: 'center',
    textAlign: 'center',
    flex:1,
    fontSize: 20,
  }
});

module.exports = Button;

Answer 1

我在rnplay上创建了代码演示。（只有ios版本。）我认为将html推送到你的州并不是一个好主意。状态是数据，如数组，布尔值和模板（字符串）。当然，这只是我的意见。

点击提交按钮后，查看控制台。

仅在反应原生的按钮按下时重新渲染

1 个答案: