Question

    1 import React from 'react';
      2
      3 class Field extends React.Component {
      4   constructor(){
      5     super()
      6     this.HandleAddListener = this.HandleAddListener.bind(this.id);
      7   }
      8   HandleAddListener(event){
      9     //var selectData = document.getElementById(id);
     10     var id = event.target.id;
     11     var selectElements = document.getElementById(id);
     12     var stringSpec = id.substr(10, 11);
     13     var specLeng = "specifySection" + stringSpec;
     14     console.log("This Id: " + id + " NumString: |" + stringSpec + "| New Id: " + specLeng);
     15     console.log("Add Id: ");
//My attempt to add listener
     16     selectElements.addEventListener("change", function(){
     17     moreInfo(id, specLeng);
     18     }, false);
     19   }
     20   render(){
     21     return (
     22     <div>
     23       <div>
     24         <label><strong> New Field </strong></label> <br />
     25         <label> Name: </label>
     26         <input id="name" className="name" type="text" name="name" /> <br />
     27         <label> Description: </label>
     28         <input id="description" className="description" type="text" name="description" /> <br />
     29         <label> Datatype: </label>
//Select value
     30         <select id="selectData-" className="selectData" name="datatypeSelect" onClick={this.HandleAddListener}>
     31           <option value="empty"> </option>
     32           <option value="string">String</option>
     33           <option value="character">Character</option>
     34           <option value="timestamp">Timestamp</option>
     35           <option value="integer">Integer</option>
     36           <option value="long">Long</option>
     37           <option value="double">Double</option>
     38           <option value="boolean">Boolean</option>
     39         </select> <br />
     40       </div>
     41       <div id="specifySection-" style={{visibility: "hidden", display: "none"}} className="specifySection">
     42         <label>Specifiy Length: </label>
     43         <input className="specifyLength" type="text" name="length" /> <br />
     44       </div>
     45     </div>
     46   )
     47   }
     48 }
     49
     50 function moreInfo(select, spec){
     51     var selected = document.getElementById(select);
     52     var specLeng = document.getElementById(spec);
     53     console.log(select + " {} " + spec);
     54     if (selected.value == "string")
     55     {
     56       specLeng.style.visibility = "visible";
     57       specLeng.style.display = "block";
     58     }
     59     else {
     60        specLeng.style.visibility = "hidden";
     61        specLeng.style.display = "none";
     62     }
     63 }
     64
     65 export default Field;

错误，它给了我：Error

Webform：Pic of project

我要完成的工作：每当您单击“添加字段”按钮时，我都会动态添加一个新字段。我需要具有以下功能：无论您选择哪种数据类型，只要将数据类型更改为字符串，都要显示相应的div“ specifySection”

有什么想法吗？

Answer 1

此代码实际上是使用有状态组件的好地方。因此，基本思想是拥有一个状态值，该状态值定义specifySection的可见性，然后使用条件条件来显示或不显示。

这将是一个实现示例：

import React from "react";

class Field extends React.Component {
  constructor() {
    super();
    this.state = {
      showSpecifySection: false
    };
  }

  onChange(event) {
    if (event.target.value === "string") {
      this.setState({ showSpecifySection: true });
    } else {
      this.setState({ showSpecifySection: false });
    }
  }

  render() {
    return (
      <div>
        <div>
          <label>
            <strong> New Field </strong>
          </label>{" "}
          <br />
          <label> Name: </label>
          <input id="name" className="name" type="text" name="name" /> <br />
          <label> Description: </label>
          <input
            id="description"
            className="description"
            type="text"
            name="description"
          />{" "}
          <br />
          <label> Datatype: </label>
          <select
            id="selectData-"
            className="selectData"
            name="datatypeSelect"
            onChange={this.onChange.bind(this)}
          >
            <option value="empty"> </option>
            <option value="string">String</option>
            <option value="character">Character</option>
            <option value="timestamp">Timestamp</option>
            <option value="integer">Integer</option>
            <option value="long">Long</option>
            <option value="double">Double</option>
            <option value="boolean">Boolean</option>
          </select>{" "}
          <br />
        </div>
        {this.state.showSpecifySection ? (
          <div
            id="specifySection-"
            style={{ visibility: "hidden", display: "none" }}
            className="specifySection"
          >
            <label>Specifiy Length: </label>
            <input className="specifyLength" type="text" name="length" /> <br />
          </div>
        ) : null}
      </div>
    );
  }
}

export default Field;

动态OnChange事件Reactjs + js

1 个答案: