Native Texteingabe reagieren Probleme

Question

Ich bin mit einem sehr einfachen Problem fest. Ich habe ein Formular mit einem usd Eingang und einem cny Eingang, ich möchte, wenn ich einen von ihnen eingabe, der andere wird einen Wert durch Berechnung anzeigen.

Beispiel

import React, { Component } from 'react'; 
    import { View, Text, TextInput } from 'react-native'; 
    class Buy extends Component { 
     constructor() { 
      super(); 
      this.state = { 
       usd: '', 
       cny: '' 
      }; 
     } 
     render() { 
     return (
     <View style={styles.inputSection}> 
      <View style={styles.leftInputSection}> 
       <Text style={styles.inputLabel}>USD</Text> 
       <TextInput 
        placeholder='0.0' 
        placeholderTextColor='#999999' 
        style={styles.inputStyle} 
        keyboardType={'numeric'} 
        onChangeText={(usd) => this.setState({ usd })} 
        value={((this.state.cny) * 7).toString()} 
       /> 
      </View> 
      <View style={styles.rightInputSection}> 
       <Text style={styles.inputLabel}>CNY</Text> 
       <TextInput 
        placeholder='0.0' 
        placeholderTextColor='#999999' 
        style={styles.inputStyle} 
        keyboardType={'numeric'} 
        onChangeText={(cny) => this.setState({ cny })} 
        value={((this.state.usd)/7).toString()} 
       /> 
      </View> 
     </View> 
    ); 
    } 
} 

Answer 1

Ich denke, das ist das, was Sie wollen, dieses Beispiel prüfen, ersetzen Sie das input Element durch die TextInput und andere Eigenschaften angeben, auch:

class App extends React.Component{ 
 

 
    constructor(){ 
 
     super(); 
 
     this.state = {a: '', b: ''} 
 
    } 
 
    
 
    render(){ 
 
     return(
 
     <div> 
 
      <input 
 
      value={this.state.a} 
 
      onChange={(e)=>this.setState({b: e.target.value *7, a: e.target.value})} 
 
      /> 
 
      <input 
 
      value={this.state.b} 
 
      onChange={(e)=>this.setState({a: e.target.value/7, b: e.target.value})} 
 
      /> 
 
     </div> 
 
    ) 
 
    } 
 

 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'/>

Hinweis: Es ist eine Lösung für das Web, um den Code zu verwenden, in reagieren-native Sie die Änderungen tun müssen, wie innerhalb onChangee.target.value ersetzen durch das, was react-native onChange bietet usw.

Answer 2

Sie nicht andere textinput verwenden sollten als Wert angeben. Als @Mayank Schnipsel, setState usd & cny im onChangeText von zwei textinput:

 <TextInput 
     placeholder='0.0' 
     placeholderTextColor='#999999' 
     style={styles.inputStyle} 
     keyboardType={'numeric'} 
     onChangeText={(usd) => this.setState({cny: usd * 7, usd: usd})} 
     value={(this.state.usd).toString()} 
    /> 
    <TextInput 
     placeholder='0.0' 
     placeholderTextColor='#999999' 
     style={styles.inputStyle} 
     keyboardType={'numeric'} 
     onChangeText={(cny) => this.setState({cny: cny, usd: cny/7})} 
     value={(this.state.cny).toString()} 
    />