Question

我创建了一个组件

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>

我想添加更多具有差异显示的下拉列表，我不想复制相同的功能，任何人都可以指导如何只传递参数并处理其输出。

谢谢

Answer 1

假设我对此comment是正确的，我相信您可以使用event.currentTarget来解决您的问题。这是一个vanilla javascript的东西，这里是documentation。

基本上，event.currentTarget总是指引发事件的确切元素。因此，它将始终引用引发您的切换事件的特定下拉列表。

注意，请勿将event.target与event.currentTarget混淆。 event.target有不同的结果;因为，它可以引用的元素可能会因事件冒泡等原因而发生变化。

如何将参数传递给reactjs中的事件句柄

1 个答案: