2017-04-19 172 views
0

我坚持一个非常简单的问题。我有一个usd输入和一个cny输入的表单,我希望当我输入其中一个时,另一个将通过计算显示一个值。反应本机textinput值问题


enter image description here

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> 
    ); 
    } 
} 

回答

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

注意:它是网络的解决方案,使用代码在反应母语,你需要做的修改,就像里面onChange由什么react-native onChange提供等

+0

你的回答是反应过来,还没有反应过来本地人。 React native textInput“onChange”不提供* e *参数,它只是提供输入值。 –

+0

@MeysamIzadmehr stackoverflow不是用来写某人的代码,它是给出你的问题的想法或解决方案的地方,我明确提到在我的回答中,要替换'input'元素并进行更改,用react-native提供的'onChange'不是一件大事,我给了他一个针对网络的工作解决方案,任何具有非常基本的react-native知识的人都可以轻松地将其转换。顺便说一句,如果你认为你可以直接在本地提供更好的解决方案,你也可以添加一个新的答案:) –

+0

你不能在反应原生textInput onChange中使用* e.target.value *。 –

0

你不应该使用其他替代为textInput e.target.value 状态作为价值。作为@Mayank片断,的setState 美元两个TextInput的onChangeText & CNY

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