Question

我遇到了一个非常简单的问题。我有一个带有usd输入和cny输入的表单，我希望当我输入其中一个时，另一个将通过计算显示一个值。

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

Answer 1

您不应使用其他textInput状态作为值。作为@Mayank片段，setState usd ＆amp;两个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()}
    />

Answer 2

我认为这就是你想要的，检查这个例子，用input替换TextInput元素并指定其他属性：

＆＃13;

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

＆＃13;

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

＆＃13;

注意：它是适用于网络的解决方案，可以使用您需要执行更改的react-native代码，例如在onChange替换e.target.value内部通过react-native onChange提供的等等。

React Native textinput值问题

2 个答案: