Reactネイティブのテキスト入力値の問題

Question

私は非常に単純な問題で立ち往生しています。私はusdの入力とcnyの入力を持つフォームを持っています。私はそれらのうちの1つを入力したいと思います。もう1つは、caculationによって値を表示します。

例

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

私はTextInputでinput要素を交換しても、他のプロパティを指定し、この例を確認し、これはあなたが欲しいものだと思う：

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'/>

注：それはあなたが他にtextInputを使うべきではありません反応し、ネイティブonChangeの内側に何react-native onChange提供等によりをe.target.value を交換するようにあなたは、変更を行う必要があり

Answer 2

でコードを使用するように、ウェブのためのソリューションです状態を値として返します。 @Mayankスニペットとして、SETSTATE 2にtextInputのonChangeTextで CNY USD & ：

 <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()} 
    />