Реакция JS: вызов двух функций в событии onClick не запускает функции - PullRequest
Новая
       9

Реакция JS: вызов двух функций в событии onClick не запускает функции

0 голосов
/ 30 марта 2020

Я использую React и React Spring. У пружины React есть функция переключения, которая по существу максимизирует окно при нажатии. Это выглядит так: 

class Projects extends Component {

constructor() {
    super()
    this.state = {
      instructions: true,
      data: ''
    }
  }

  handleClick ()  {
    console.log('hello world');
    this.setState({
      instructions: false
    });
    console.log(this.state.instructions);
    return true;
  }

  render() {
    return (
       {this.state.instructions && (
          <div className="projects-instructions">
             Instructions here
          </div>
       )}
       <Grid
            className="projects"
            data={data}
            keys={d => d.name}
            heights={d => d.height}
            columns={2}>
            {(data, maximized, toggle) => (
                  <div onClick={()=>{
                         return data.clicks ? toggle() : false
                       }}>
                  </div>
            )}
       </Grid>
    );
  }
}
export default Projects;

Что я хочу сделать, это скрыть инструкции по нажатию кнопки. Я могу сделать это, вызвав handleClick via, this.handleClick.bind(this) в моем теге onClick via: onClick={this.handleClick.bind(this)}. Но это означает, что я должен удалить функцию onClick переключения. Поэтому я обнаружил, что могу вызывать две функции, например, так: 

onClick={()=>{
                  this.handleClick.bind(this);
                  return data.clicks ? toggle() : false;
                }}

Проблема в том, что this.handleClick.bind(this) никогда не запускается. console.log даже не запускается.

Как мне это сделать?

1 Ответ

1 голос
/ 30 марта 2020

Привязка this к функции не вызывает функцию. Он просто указывает, на что ссылается this при использовании в этой функции. Привязать к this в конструкторе, а затем, в вашем onClick событии, просто вызвать функцию нормально (т.е. this.handleClick()). 

class Projects extends Component {

  constructor() {
    super();
    this.state = {
      instructions: true,
      data: ''
    }

    //this is where you bind `this` to methods
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick ()  {
    console.log('hello world');
    this.setState({
      instructions: false
    });
    console.log(this.state.instructions);
    return true;
  }

  render() {
    return (
       {this.state.instructions && (
          <div className="projects-instructions">
             Instructions here
          </div>
       )}
       <Grid
            className="projects"
            data={data}
            keys={d => d.name}
            heights={d => d.height}
            columns={2}>
            {(data, maximized, toggle) => (
              <div onClick={()=>{
                this.handleClick();
                return data.clicks ? toggle() : false
              }}>
              </div>
            )}
       </Grid>
    );
  }
}
export default Projects;
...