전화 수준의 기능은 내가 새로 온 기본

Question

네이티브 반작용에 반응하고, 여기에 문제가, 내가 onChangeText 기능에 람다 대신 폐쇄를 사용할 가지고 :

render() { 
     return (
      <View style={{padding: 10}}> 
       <TextInput style={{height: 40}} placeholder="Type here" 
          onChangeText = {function(t) { 
          this.setState({text: t}); 
          }} 
          // onChangeText={(text) => this.setState({text: text})} 
       /> 
       <Text style={{padding: 10, fontSize: 42}}> 
        {this.state.text.split(' ').map((word) => word && '').join(' ')} 
       </Text> 
      </View> 
     ); 
    } 

문제는 폐쇄 내부 , this은 클래스 컨텍스트가 아닌 클로저 컨텍스트이므로 setState을 호출 할 수 없습니다. 자바에서는이 부분 만 제거하면됩니다.하지만 JS에서 어떻게 할 수 있습니까?

Answer 1

JavaScript의 bind method을 사용할 수 있습니다.

원하는 기능이 이미 클래스의 메소드라고 가정합니다. 예 :

class MyClass extends React.Component { 

    myMethodThatChangesState() { 
    this.setState(...); 
    } 

    render() {...} 
} 

반응에는 순수한 기능이 필요합니다. 과 같이, 자바 스크립트 기능의 결합 방법을 통해 클래스에 당신의 방법 바인딩

onChangeText={() => this.setState(..)} 

: 같은 람다를 사용하지 Function.bind(this) 반환 마지막 인수로 this와 함수를 사용하여

onChangeText={myMethodThatChangesState.bind(this)} 

- 그래서 this이 귀하의 React 클래스가됩니다. ES6 화살표 기능은 동일한 동작을 수행합니다.

이렇게하면 렌더링 마크 업에서 화살표 기능을 사용하지 않아도됩니다.