Вызов функции класса внутри крышки Реагировать родной

Question

Я новичок в React родной, и получил здесь проблема, я хочу использовать замыкание вместо лямбда в 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. В Java я просто просто удаляю это и все в порядке, но как я могу это сделать в JS?

Answer 1

Вы можете использовать JavaScript bind method.

Предполагая, что ваша желаемая функция уже является методом вашего класса. т.е.:

class MyClass extends React.Component { 

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

    render() {...} 
} 

Реакция требует чистых функций. Для того, чтобы избежать использования лямбды, такие как:

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

Bind вашего метода в класс с помощью метода связывания применения JavaScript функции, как и так:

onChangeText={myMethodThatChangesState.bind(this)} 

Использования Function.bind(this) возвращает функцию с this как последним аргументом - так this будет вашим классом React. Функции ES6 arrow выполняют одно и то же действие.

Таким образом, вы можете избежать использования функций стрелок в своей разметке рендеринга.