하나의 핸들러에서 여러 변경 이벤트를 처리하는 방법은 무엇입니까?

브라이언 J

onChangeText뷰에서 세 가지 입력을 듣고 있습니다. 그러나 세 개의 개별 onChangeText핸들러 를 사용하는 대신 . 입력의 입력 상태 이름을 핸들러에 전달하고 그로부터 상태를 설정하고 싶습니다.

이 예제를 시도했지만 e.target.value가 undefined. 건네 name번째 매개 변수로하고 e소자의 포인터 :

import React, { Component } from 'react';
import { View, StyleSheet, Alert, Image, TextInput } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  state = {
    setValue: 0,
    travelValue: 0,
    runValue: 0

  };


  _handleTextChange (e, name) {
      var change = {};
      change[name] = e.target.value;
      this.setState(change);
  }


  render() {
    return (
      <View style={styles.container}>


        <TextInput
          value={this.state.setValue}
          keyboardType = 'numeric'
          onChangeText={this._handleTextChange.bind(this, 'setValue')}
          style={{ width: 200, height: 44, padding: 8 }}
        />
         <TextInput
          value={this.state.travelValue}
          keyboardType = 'numeric'
          onChangeText={this._handleTextChange.bind(this, 'travelValue')}
          style={{ width: 200, height: 44, padding: 8 }}
        />
         <TextInput
          value={this.state.runValue}
          keyboardType = 'numeric'
          onChangeText={this._handleTextChange.bind(this, 'runValue')}
          style={{ width: 200, height: 44, padding: 8 }}
        />

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingTop: Constants.statusBarHeight,
    paddingBottom: '20%',
    backgroundColor: '#ecf0f1',
  },
});

질문:

하나의 핸들러에서 여러 변경 이벤트를 어떻게 처리 할 수 ​​있습니까?

마 얀크 슈 클라

잘못된 순서로 사용 했으므로 다음과 같이 사용하십시오.

_handleTextChange (name, e) {  //first name then event
    var change = {};
    change[name] = e.target.value;
    this.setState(change);
}

당신은 정의,이처럼 쓸 수있는 name입력 요소에 속성을 그 다음 액세스 name하여 e.target.name이 등을 :

<TextInput
    value={this.state.setValue}
    name='setValue'
    onChangeText={this._handleTextChange}
    ....

Bind_handleTextChange function에서 constructor:

this._handleTextChange = this._handleTextChange.bind(this);

다음과 _handleTextChange같이 사용하십시오 .

_handleTextChange(e){
      var change = {};
      change[e.target.name] = e.target.value;
      this.setState(change);
}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

MVVM에서 이벤트를 처리하는 동안 이벤트 핸들러의 두 번째 매개 변수를 보내는 방법은 무엇입니까?

분류에서Dev

서버리스에서 하나의 핸들러에 대해 여러 경로를 정의하는 방법은 무엇입니까?

분류에서Dev

JavaScript의 이벤트 핸들러에서 공용 함수를 호출하는 방법은 무엇입니까?

분류에서Dev

jest에서 지연된 이벤트 핸들러를 테스트하는 방법은 무엇입니까?

분류에서Dev

자바 스크립트 (jquery)-하나의 이벤트에 연결된 여러 핸들러 : 하나만 분리하는 방법은 무엇입니까?

분류에서Dev

"이벤트 핸들러에서 데이터베이스에 변경 사항을 저장할 수 없음"을 해결하는 방법은 무엇입니까?

분류에서Dev

React : 이벤트 핸들러 내에서 반응 후크를 호출하는 방법은 무엇입니까?

분류에서Dev

동일한 부모로 다른 이벤트 핸들러를 처리하는 방법은 무엇입니까?

분류에서Dev

카우보이 웹 소켓 핸들러에서 예외를 처리하는 방법은 무엇입니까?

분류에서Dev

Java의 이벤트 핸들러에서 JLabel에 선을 그리는 방법은 무엇입니까?

분류에서Dev

React에서 이벤트 핸들러를 트리거하는 구성 요소를 확인하는 방법은 무엇입니까?

분류에서Dev

ConcurrentLinkedQueue : Java에서 핸들러를 구현하는 방법은 무엇입니까?

분류에서Dev

체크 박스 변경 이벤트 처리를위한 이벤트 핸들러를 구별하는 방법

분류에서Dev

사용자가 SwiftUI에서 길게 누르기 제스처를 중지 할 때 이벤트 핸들러를 실행하는 방법은 무엇입니까?

분류에서Dev

React-js에서 캡처 단계에 대한 이벤트 핸들러를 등록하는 방법은 무엇입니까?

분류에서Dev

React JS의 다른 입력에 하나의 이벤트 핸들러를 연결하는 방법은 무엇입니까?

분류에서Dev

이벤트 핸들러를 하나로 사용하는 방법은 무엇입니까? 파이썬

분류에서Dev

하나의 Rails 모델에서 여러 워크 플로를 처리하는 방법은 무엇입니까?

분류에서Dev

Mono.Cecil을 사용하여 삽입 된 try catch 핸들러에서 Exception 변수에 두 번 이상 액세스하는 방법은 무엇입니까?

분류에서Dev

타사 라이브러리에서 경고 / 힌트를 처리하는 방법은 무엇입니까?

분류에서Dev

여러 입력의 상태를 처리하고 부모에서 상태를 변경하는 방법은 무엇입니까?

분류에서Dev

Maven에서 여러 테스트 환경을 처리하는 방법은 무엇입니까?

분류에서Dev

웹 사이트에서 여러 웹 페이지를 변경하는 방법은 무엇입니까?

분류에서Dev

외부 라이브러리의 초기화 및 이벤트를 처리하는 방법은 무엇입니까?

분류에서Dev

Android에서 동적으로 생성 된 뷰를 만들 때 이벤트 핸들러를 추가하는 방법은 무엇입니까?

분류에서Dev

Spring MVC 컨트롤러에서 여러 경로 변수를 바인딩하는 방법은 무엇입니까?

분류에서Dev

여러 이벤트를 "this"에 결합하는 방법은 무엇입니까?

분류에서Dev

여러 개의 상자를 만들고 한쪽에서만 텍스처를 변경하는 방법은 무엇입니까?

분류에서Dev

이벤트 핸들러 내에서 전달 된 변수를 변경하는 방법

Related 관련 기사

  1. 1

    MVVM에서 이벤트를 처리하는 동안 이벤트 핸들러의 두 번째 매개 변수를 보내는 방법은 무엇입니까?

  2. 2

    서버리스에서 하나의 핸들러에 대해 여러 경로를 정의하는 방법은 무엇입니까?

  3. 3

    JavaScript의 이벤트 핸들러에서 공용 함수를 호출하는 방법은 무엇입니까?

  4. 4

    jest에서 지연된 이벤트 핸들러를 테스트하는 방법은 무엇입니까?

  5. 5

    자바 스크립트 (jquery)-하나의 이벤트에 연결된 여러 핸들러 : 하나만 분리하는 방법은 무엇입니까?

  6. 6

    "이벤트 핸들러에서 데이터베이스에 변경 사항을 저장할 수 없음"을 해결하는 방법은 무엇입니까?

  7. 7

    React : 이벤트 핸들러 내에서 반응 후크를 호출하는 방법은 무엇입니까?

  8. 8

    동일한 부모로 다른 이벤트 핸들러를 처리하는 방법은 무엇입니까?

  9. 9

    카우보이 웹 소켓 핸들러에서 예외를 처리하는 방법은 무엇입니까?

  10. 10

    Java의 이벤트 핸들러에서 JLabel에 선을 그리는 방법은 무엇입니까?

  11. 11

    React에서 이벤트 핸들러를 트리거하는 구성 요소를 확인하는 방법은 무엇입니까?

  12. 12

    ConcurrentLinkedQueue : Java에서 핸들러를 구현하는 방법은 무엇입니까?

  13. 13

    체크 박스 변경 이벤트 처리를위한 이벤트 핸들러를 구별하는 방법

  14. 14

    사용자가 SwiftUI에서 길게 누르기 제스처를 중지 할 때 이벤트 핸들러를 실행하는 방법은 무엇입니까?

  15. 15

    React-js에서 캡처 단계에 대한 이벤트 핸들러를 등록하는 방법은 무엇입니까?

  16. 16

    React JS의 다른 입력에 하나의 이벤트 핸들러를 연결하는 방법은 무엇입니까?

  17. 17

    이벤트 핸들러를 하나로 사용하는 방법은 무엇입니까? 파이썬

  18. 18

    하나의 Rails 모델에서 여러 워크 플로를 처리하는 방법은 무엇입니까?

  19. 19

    Mono.Cecil을 사용하여 삽입 된 try catch 핸들러에서 Exception 변수에 두 번 이상 액세스하는 방법은 무엇입니까?

  20. 20

    타사 라이브러리에서 경고 / 힌트를 처리하는 방법은 무엇입니까?

  21. 21

    여러 입력의 상태를 처리하고 부모에서 상태를 변경하는 방법은 무엇입니까?

  22. 22

    Maven에서 여러 테스트 환경을 처리하는 방법은 무엇입니까?

  23. 23

    웹 사이트에서 여러 웹 페이지를 변경하는 방법은 무엇입니까?

  24. 24

    외부 라이브러리의 초기화 및 이벤트를 처리하는 방법은 무엇입니까?

  25. 25

    Android에서 동적으로 생성 된 뷰를 만들 때 이벤트 핸들러를 추가하는 방법은 무엇입니까?

  26. 26

    Spring MVC 컨트롤러에서 여러 경로 변수를 바인딩하는 방법은 무엇입니까?

  27. 27

    여러 이벤트를 "this"에 결합하는 방법은 무엇입니까?

  28. 28

    여러 개의 상자를 만들고 한쪽에서만 텍스처를 변경하는 방법은 무엇입니까?

  29. 29

    이벤트 핸들러 내에서 전달 된 변수를 변경하는 방법

뜨겁다태그

보관