Как объявить переменную для внутренней функции в реагирующем компоненте?

Question

когда я пытаюсь использовать переменную в своей функции класса, получая эту ошибку Cannot read property 'zoomInIndex' of undefined

все работает нормально, если у меня есть одна функция, может ли кто-нибудь помочь мне, как использовать переменную во внутренней функции иликак связать внутренний контекст функции?

class MyContainer extends Component {

    constructor(props) {
        super(props);
        this.testClick = this.testClick.bind(this);
        this.zoomClick = this.zoomClick.bind(this);
        this.testVarible= "this is a test";
    }

    zoomClick(inout) {
    return function(e) {
         console.log(this.testVarible); // this is not working 
      }
    }
    
    
    testClick(){
       console.log(this.testVarible);
    }
    
    
}

если я использую функции жирной стрелки, она работает нормально

zoomClick = inout => e => {
    console.log(this.testVarible);
}

, но я не хочу использовать функции жирной стрелки в компонентах реагирования, так как яЯ столкнулся с большим количеством проблем с моей конфигурацией веб-пакета.

, поэтому мой вопрос в том, как использовать переменную во внутренней функции или как связать контекст внутренней функции с синтаксисом жирной стрелки?

Answer 1

Вы можете привязать его к контексту класса одним из двух способов:

returnFunction = returnFunction.bind(this); или function() {}.bind(this).

class MyContainer extends React.Component {

    constructor(props) {
        super(props);
        this.testClick = this.testClick.bind(this);
        this.zoomClick = this.zoomClick.bind(this);
        this.testVarible = "this is a test";
    }

    zoomClick(inout) {
      let returnFunction = function(e) {
        console.log(this.testVarible);
        return this.testVarible;
      };
      returnFunction = returnFunction.bind(this);
      return returnFunction;
    }
    
    
    testClick(){
       console.log(this.testVarible);
    }
    
    render() {
      return (
        <div>{this.zoomClick(false)(false)}</div>
      );
    }
    
}

ReactDOM.render(
  <MyContainer/>,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

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

Я предполагаю, что вы пытались использовать поля классас плагином Babel, и это вызвало у вас некоторое горе.

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

class MyContainer extends React.Component {

  constructor(props) {
    super(props);
    this.zoomClick = this.zoomClick.bind(this);
    this.testVarible = "this is a test";
  }

  zoomClick() {
    return (e) => {
      console.log(this.testVarible);
    }
  }

  render() {
    return <Button handleClick={this.zoomClick} />
  }

}

function Button({ handleClick }) {
  return <button onClick={handleClick()}>Click</button>
}

ReactDOM.render(
  <MyContainer /> ,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container"></div>

Answer 3

Вам необходимо bind function, возвращаемое из zoomClick():

zoomClick(inout) {
    return function(e) {
        console.log(this.testVarible); // this is not working
    }.bind(this); // <-- bind(this)
}

Анонимный function, который был возвращен, не имел контекста this, и поэтому он давалошибка.Поскольку zoomClick уже связан в конструкторе, вам просто нужно bind function(e) { ... }