反應本機textinput值問題

我堅持一個非常簡單的問題。我有一個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> 
    ); 
    } 
}

來源

2017-04-19 Changcui Wan

-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提供等

來源

2017-04-19 07:51:45

你的回答是反應過來，還沒有反應過來本地人。 React native textInput「onChange」不提供* e *參數，它只是提供輸入值。 –

@MeysamIzadmehr stackoverflow不是用來寫某人的代碼，它是給出你的問題的想法或解決方案的地方，我明確提到在我的回答中，要替換'input'元素並進行更改，用react-native提供的'onChange'不是一件大事，我給了他一個針對網絡的工作解決方案，任何具有非常基本的react-native知識的人都可以輕鬆地將其轉換。順便說一句，如果你認爲你可以直接在本地提供更好的解決方案，你也可以添加一個新的答案:) –

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

你不應該使用其他替代爲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()} 
    />

來源

2017-04-19 09:50:10

反應本機textinput值問題

回答

相關問題