Javascript 如何在this.state.show中实现变量&引用；常数“：&引用；常数；

我需要在this.state.Showed中显示文本框值，但如果给定的变量名打印相同，我只接受常量。如何在此处使用变量，例如：

{this.state.shown ? "Reject Reason" : "Accepted Reason"}

工作正常

<textarea placeholder="Reason for Rejection" id="mdlplc" className="mdlcnt"/>

const rejectReason = document.getElementsByClassName("mdlcnt").innerHTML;

{this.state.shown ? "rejectReason " : ""} 

const rejectReason=document.getElementsByClassName（“mdlcnt”）.innerHTML；
{this.state.show？“拒绝原因”：“”}

它不起作用了

---

我的完整组件代码是：

import React, { Component } from 'react';
import Modal from 'react-responsive-modal';
import '../dashboard/Dashboard.css';
import './BasicTable.css';
//import SearchField from 'react-search-field';

export class BasicTable extends Component {

  state = {
    open: false,
  };
  onSubmitdata = () => {
    this.setState({open: false});
    this.setState({ shown: !this.state.shown });
  }
  onOpenModal = () => {
    this.setState({ open: true });
  };
  on
  onCloseModal = () => {
    this.setState({ open: false });
  };
  render() {
    const { open } = this.state;
    const rejectReason = document.getElementsByClassName("mdlcnt").innerHTML;

    return (
      <div>
        <div className="row">  

        <h4 className="card-title"> View Appointments</h4>

          <div className="col-lg-12 grid-margin stretch-card">
            <div className="card">
              <div className="card-body">
              <div className="table-responsive">
                  <table className="table reposive" >

                   <tr >
                       <td className="noBorder" id="details">Doctor Name</td> 
                       <td className="noBorder"> Jessica Smith</td>
                   </tr>  
                   <tr>
                       <td className="noBorder" id="details">Patient Name</td> 
                       <td className="noBorder">Jack Robinson</td>
                   </tr>  
                   <tr>
                       <td className="noBorder" id="details">Date</td> 
                       <td className="noBorder">Jan 15 2020</td>
                   </tr>  
                   <tr>
                       <td className="noBorder" id="details">Time</td> 
                       <td className="noBorder"> 9.00 AM to 9.00 AM</td>
                   </tr>  
                   <tr>
                       <td className="noBorder" id="details">Status</td> 
                       <td className="noBorder" id="status">BOOKED</td>
                   </tr>  
                   <tr>
                       <td className="noBorder" id="details"> {this.state.shown ? "Reject Reason" : ""}</td> 
                       <td className="noBorder" >{this.state.shown ? rejectReason : ""}</td>
                   </tr> 
                  </table>
                  <button onClick={this.onOpenModal} className="badge badge-dange">Reject Appointment</button>
                </div>
              </div>
            </div>
          </div>
          <div>

        <Modal open={open} onClose={this.onCloseModal} center>
          <p id="mdlhd">Reject Appointment</p>
          <textarea  placeholder="Reason for Rejection" id="mdlplc" className="mdlcnt" />
          <button id="mdlsbt" onClick={this.onSubmitdata}>Submit</button>
          <button id="mdlcnl" onClick={this.onCloseModal}>Cancel</button>
        </Modal>
      </div>
        </div>
      </div>
    )
  }
}

export default BasicTable

import React，{Component}来自'React'；
从“反应响应模态”导入模态；
导入“../dashboard/dashboard.css”；
导入“/BasicTable.css”；
//从“反应搜索字段”导入搜索字段；
导出类BasicTable扩展组件{
状态={
开：错，
};
onSubmitdata=（）=>{
this.setState（{open:false}）；
this.setState（{show:！this.state.show}）；
}
onOpenModal=（）=>{
this.setState（{open:true}）；
};
在…上
onCloseModal=（）=>{
this.setState（{open:false}）；
};
render（）{
const{open}=this.state；
const rejectReason=document.getElementsByClassName（“mdlcnt”）.innerHTML；
返回(
查看约会
医生姓名
杰西卡·史密斯
患者姓名
杰克罗宾逊
日期
2020年1月15日
时间
上午9时至9时
地位
预定
{this.state.show？“拒绝原因”：“”}
{this.state.show？拒绝原因：}
拒绝任命
拒绝约会

提交
取消
)
}
}
导出默认基本表

您可以使用元素的

ref

来引用元素本身，并可以获得元素的

值：

constructor(props){ // add this block to your class component.
    super(props);
    this.mdlplcRef = React.createRef() // in a class component's constructor
}
// const mdlplcRef = useRef(); // the functional component way

然后将此引用用于元素：

<textarea ref={this.mdlplcRef} 
          placeholder="Reason for Rejection" 
          id="mdlplc" className="mdlcnt"/>

只有一个元素的类为ame mdlcnt吗？如果否，则表示您持有一个数组。.是的，只有一个元素使用此名称。mdlplcRef=React.createRef（）检查我在行后给出的注释。如果该行是类组件，则可以将其放入构造函数中。是否可以在问题中添加组件代码？很难对你最后的评论作出反驳。@SabrilogeshK你在我的回答中添加了代码。不，您必须把它放在问题中。ReferenceError:必须在访问“this”或从派生构造函数返回之前调用派生类中的超级构造函数
// const rejectReason = document.getElementsByClassName("mdlcnt").innerHTML;
const rejectReason = this.mdlplcRef.current.value;

{this.state.shown ? rejectReason : ""}