0

入力フィールドのテキストが特定の変数を変更するために変更されたときに変数を送信して、同じ関数を再利用できるようにする方法を知りたいです。

var app = React.createClass({
 getInitialState: function() {
  return {
  gender: 'Male',
  name: '',
};
},
render: function() {
return (
  <View style={styles.container}>
    <TextInput style={styles.input}
      ref="gender"
      onChangeText={this.handleChange}
      placeholder={this.state.gender} />
    <TextInput style={styles.input}
      ref="name"
      onChangeText={this.handleChange}
      placeholder="name" />
  </View>
);
},
handleChange: function(text) {
  this.setState({gender: text});
}

テキストを変更すると、「性別」の状態が変更されますが、「名前」の状態を変更すると、すべて同じ機能で変更されます。また、テキストが変更されると、同じ関数でその変数の状態が変更される他のフィールドを追加する必要があります。

4

1 に答える 1

0

2 つの引数を取る関数を作成し、チェックして目的の変数の状態を設定する必要があります。

handleChange: function(text, arg2) {
  if(arg2 == 'gender') {
    this.setState({
      gender: text
    });
  } else if(arg2 == 'name') {
    this.setState({
      name: text
    });
  }
}

機能が実装されたサンプル アプリを次に示します。

https://rnplay.org/apps/DX6Nrg

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput
} = React;

var App = React.createClass({
 getInitialState: function() {
  return {
  gender: 'Gender is not yet set...',
  name: 'Name is not yet set...',
};
},
  handleChange: function(text, arg2) {
  if(arg2 == 'gender') {
    this.setState({
      gender: "gender is " + text
    });
  } else if(arg2 == 'name') {
    this.setState({
      name: "name is " + text
    });
  }
},
render: function() {
return (
  <View style={styles.container}>
    <TextInput style={{backgroundColor: 'red', height:50}}
      ref="gender"
      onChangeText={(text) => {this.handleChange(text, 'gender')}}
      placeholder="Gender" />
    <TextInput style={{marginTop:10, backgroundColor: 'blue', height:50}}
      ref="name"
      onChangeText={(text) => {this.handleChange(text, 'name')}}
      placeholder="name" />

        <Text style={{marginTop:10, fontSize:20}}>{this.state.gender}</Text>
            <Text style={{marginTop:10, fontSize:20}}>{this.state.name}</Text>
  </View>
);
}
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:50
  },
  welcome: {
    fontSize: 28,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    fontSize: 19,
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('App', () => App);
于 2015-11-18T04:08:50.530 に答える