Как передать параметр в обработчик события в responsejs - PullRequest
Новая
       13

Как передать параметр в обработчик события в responsejs

0 голосов
/ 17 мая 2018

Я создал компонент 

import React, { Component } from 'react'
import AppStep from '../common/AppStep'
import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';

class Step2 extends Component {
    constructor(props) {
        super(props);
        this.togglePhoto = this.togglePhoto.bind(this);
        this.selectPhoto = this.selectPhoto.bind(this);

        this.toggleDoc = this.toggleDoc.bind(this);
        this.selectDoc = this.selectDoc.bind(this);


        this.state = {
          dropdownOpenDoc: false,
          dropdownOpenPhoto: false,
          valueDoc : "រូប​ថត",
          valuePhoto : "រូប​ថត"
        };


      }



    toggleDoc(event) {
        console.log(event.target.innerText)
        this.setState({
          dropdownOpenDoc: !this.state.dropdownOpenDoc
        });
      }
      selectDoc(event) {
          //console.log(event.target.innerText)
        this.setState({
          dropdownOpenDoc: !this.state.dropdownOpenDoc,
          valueDoc: event.target.innerText
        });

    }
    togglePhoto(event) {
        console.log(event.target.innerText)
        this.setState({
            dropdownOpenPhoto: !this.state.dropdownOpenPhoto
        });
      }
    selectPhoto(event) {
        //console.log(event.target.innerText)
      this.setState({
        dropdownOpenPhoto: !this.state.dropdownOpenDocPhoto,
        valuePhoto: event.target.innerText
      });

  }
    renderForm() {
        return (

            <form className="needs-validation"  name="loan-info" noValidate method="POST" action="/">
              <hr className="mb-4"/>

              <div className="row">
                  <div className="col-md-6 mb-3">            
                    <div className="btn-group">

                        <ButtonDropdown isOpen={this.state.dropdownOpenPhoto} toggle={this.togglePhoto}>
                                <DropdownToggle caret>{this.state.valuePhoto}</DropdownToggle>
                                <DropdownMenu>
                                        <DropdownItem onClick={this.selectPhoto}>ថត​ថ្មីពី​កាមេរា</DropdownItem>
                                        <DropdownItem onClick={this.selectPhoto}>ដាក់​រូប​ដែល​មាន​ស្រាប់</DropdownItem>
                                </DropdownMenu>
                        </ButtonDropdown>

                    </div>
                    <div id="photo-placholder">
                        <img className="img-placeholder-photo"  src="holder.js/312x225"/>

                        <div className="custom-camera" id="camera-photo">
                          <img className="img-placeholder" src="img/kanel.png"/>
                        </div>

                        <div className="custom-file" id="upload-photo" >
                          <input type="file" className="custom-file-input" id="photo-input-file" aria-describedby="fileHelp" required />
                          <label className="custom-file-label" htmlFor="photo-input-file">
                              ជ្រើសរូបថត​អ្នក
                          </label>
                          <div className="invalid-feedback">
                              អ្នក​ចាំបាច់​បំពេញ ជ្រើសរូបថត
                          </div>
                        </div>

                    </div>
                  </div>

                  <div className="col-md-6 mb-3">            
                    <div className="btn-group">
                    {/* Render another dropdown list */}

                    <ButtonDropdown isOpen={this.state.dropdownOpenDoc} toggle={this.toggleDoc}>
                                <DropdownToggle caret>{this.state.valueDoc}</DropdownToggle>
                                <DropdownMenu>
                                        <DropdownItem onClick={this.selectDoc}>ថត​ថ្មីពី​កាមេរា</DropdownItem>
                                        <DropdownItem onClick={this.selectDoc}>ដាក់​រូប​ដែល​មាន​ស្រាប់</DropdownItem>
                                </DropdownMenu>
                        </ButtonDropdown>

                    </div>

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

Спасибо

1 Ответ

0 голосов
/ 17 мая 2018

Предполагая, что я прав в этом комментарии , я полагаю, что вы можете решить свою проблему с помощью event.currentTarget. Это ванильный javascript, вот документация .

По сути, event.currentTarget всегда относится к точному элементу, вызвавшему событие. Так что он всегда будет ссылаться на конкретный выпадающий список, который вызвал ваше событие переключения.

Обратите внимание, НЕ путайте event.target с event.currentTarget. event.target имеет разные результаты; потому что элемент, на который он может ссылаться, может измениться из-за таких вещей, как пузыри событий.

...