Как получить доступ к компонентным методам в React? - PullRequest
Новая
       11

Как получить доступ к компонентным методам в React?

0 голосов
/ 21 декабря 2018

Я работаю над React.
У меня есть метод с именем on_render_cell , в котором я создал div и вставляю изображение в этот div на основе некоторых условий.
ЭтоПодход, которого я придерживаюсь, чтобы вставить изображение в div. Я получаю нужные изображения.Теперь моя цель:
Чтобы открыть модал при нажатии на изображение.Когда я пытаюсь назначить onClick = {this.openModal ()} , модальное окно не появляется.Я заметил, что это потому, что это указывает на <img>.Может ли кто-нибудь помочь мне, как я могу вызвать openModal () для обработчика клика тега изображения, записанного в переменной результата on_render_cell ()? 

export class ScheduleManager extends SampleBase {
constructor() {
        super(...arguments);
        this.state = {
            visible : false
        }
    }    
openModal() {
            this.setState({
                visible : true
            });


   }


    closeModal() {
        this.setState({
            visible : false
        });
    }
on_render_cell(args) {
let ele = document.createElement('div');
            var sum=0;
            var cursor=Event.find({Teacher:teacherName});
            cursor.forEach(function(event){
              if(convert(event.StartTime)===convert(args.date))
               sum = sum + parseFloat(event.Duration);
             });
              let hoursPerDay = sum/60;
              let percentHours=(hoursPerDay/maxHoursPerDay)*100;
              let result ='';
              if(percentHours===0)
              {
                result='<img id="aaa" ref="abc" className="weather-image" height="25px" width="25px" src="http://www.clker.com/cliparts/h/e/s/t/j/U/grey-circle.svg.thumb.png"  onClick={console.log(this)} />';
              }
              else if(percentHours<=25)
              {
                result = '<img className="weather-image"  src= "http://www.clker.com/cliparts/0/w/P/n/G/3/blue-circle-th.png" />';
              }
              else if(percentHours>25 && percentHours<=50)
              {
                result='<img className="weather-image"  src= "http://www.clker.com/cliparts/o/b/y/x/Z/c/yellow-dot-th.png" />';
              }
              else if(percentHours>50 && percentHours<=75)
              {
                result = '<img className="weather-image"  src= "http://www.clker.com/cliparts/1/A/W/q/h/h/orange-circle-th.png" />';
              }
              else
              {
                result='<img className="weather-image"  src= "http://www.clker.com/cliparts/3/m/Q/u/P/J/red-circle-small-new.svg.thumb.png" />';
              }
              ele.innerHTML = result; 
             (args.element).appendChild(ele.firstChild);
}
render(){
 return (
          <div>
          <input type="button" value="Open" onClick={() => this.openModal()} />
          <Modal 
                    visible={this.state.visible}
                    width="400"
                    height="300"
                    effect="fadeInUp"
                    onClickAway={() => this.closeModal()}
                >
                    <div>
                        <h1>Title</h1>
                        <p>Some Contents</p>
                        <a href="javascript:void(0);" onClick={() => this.closeModal()}>Close</a>
                    </div>
                </Modal>
          <p>Grey circle denotes no classes for the day</p>
          <p>Blue circle denotes less than 25% occupancy for the day</p>
)
}
}

Цель: Открыть модал при нажатии на изображение.то есть доступ к openModal () компонента

Ответы [ 2 ]

0 голосов
/ 21 декабря 2018

Вы можете задать некоторую переменную, например, myRef, для вашего компонента в качестве подпорки, а затем в onComponentDidMount вашего компонента назначить подпрограмму текущего экземпляра подпорки myRef (this).this.props.myRef = this, тогда в вашем родительском компоненте вы можете использовать методы myRef.Более подробно вы можете посмотреть в этом посте React.js - доступ к компонентам

0 голосов
/ 21 декабря 2018

извините, но вы делаете это неправильно.когда вы пишете: 

onClick={() => this.openModal()}

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

this.openModal = this.openModal.bind(this);

и внутри входной записи: 

onClick={this.openModal}

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

Если я правильно понимаю, проблема в этой строке:

result='<img id="aaa"... onClick={console.log(this)} />';

вы пытались пройтиJSX вместо строки?свяжите функцию openModal в конструкторе и передайте img функцию this.openModal.Я думаю, что если вы передадите JSX вместо строки, она будет работать

ОБНОВЛЕНИЕ

ОК, поэтому я взял код из Здесь и отредактировалэто немного

export class CellTemplate extends SampleBase {
  getCellContent(date) {
      if (date.getMonth() === 10 && date.getDate() === 23) {
        return ( < div > < img src = "src/schedule/images/thanksgiving-day.svg" / > < div className = "caption" > Thanksgiving day < /div></div > );
      }

      cellTemplate(props) {
          if (props.type === "monthCells") {
            return ( < div className = "templatewrap" > {
                this.getCellContent(props.date)
              } > < /div>);
            }
            return;
          }
          render() {
            return ( < div className = 'schedule-control-section' >
              <
              div className = 'col-lg-12 control-section' >
              <
              div className = 'control-wrapper' >
              <
              ScheduleComponent cssClass = 'cell-template'
              width = '100%'
              height = '650px'
              selectedDate = {
                new Date(2017, 11, 15)
              }
              cellTemplate = {
                this.cellTemplate.bind(this)
              } >
              <
              ViewsDirective >
              <
              ViewDirective option = 'Month' / >
              <
              /ViewsDirective> <
              Inject services = {
                [Month, Resize, DragAndDrop]
              }
              /> <
              /ScheduleComponent> <
              /div> <
              /div> <
              /div>);
            }
          }

в cellTemplate вы можете увидеть, как правильно вызвать getCellContent , а в getCellContent вы можете увидетькак бы мне вернуть JSX.

...