React 구성 요소 내에서 요소를 동적으로 작성하십시오.

Question

버튼을 클릭하면 구성 요소 내에 요소를 동적으로 작성하는 도우미 함수를 작성했습니다. 그러나 그것은 부모 div에 추가하려고하는 html의 절반을 표시하지 않습니다.

레이블을 HTML로 올바르게 추가하지만 나머지는 일반 텍스트입니다. 왜 누군가는 볼 수 있습니까?

동적으로 컨텐츠를 생성하는 데 사용되는 기능 :

function addElement(parentId, elementTag, elementId, html) { 
    let parentElement = document.getElementById(parentId); 
    let elementToAdd = document.createElement(elementTag); 
    elementToAdd.setAttribute('id', elementId); 
    elementToAdd.innerHTML = html; 
    parentElement.appendChild(elementToAdd); 
} 

내 구성 요소에서 내 기능 :

static addMatch() { 
    let html = "<div className=\"form-group\"><label className=\"control-label\">Add Match</label>" + 
     "<DatePickerselected={this.state.startDate}onChange={this.handleChange.bind(this)}/></div>"; 
    addElement('fixture-parent', 'newMatch', uuid(), html); 
} 

내 전체 구성 요소는 다음과 같습니다 반응 :

import React, {Component} from "react"; 
import DatePicker from "react-datepicker"; 
import {addElement} from "../../helpers/DynamicElementsHelper"; 
import moment from "moment"; 
const uuid = require('uuid/v1'); 

require('react-datepicker/dist/react-datepicker.css'); 

class Fixtures extends Component { 

    constructor() { 
     super(); 
     Fixtures.addMatch = Fixtures.addMatch.bind(this); 
     this.state = { 
      startDate: moment() 
     }; 
    } 

    handleChange(date) { 
     this.setState({ 
      startDate: date 
     }); 
    } 

    static addMatch() { 
     let html = "<div className=\"form-group\"><label className=\"control-label\">Add Match</label>" + 
      "<DatePicker selected={this.state.startDate} onChange={this.handleChange.bind(this)} /></div>"; 
     addElement('fixture-parent', 'newMatch', uuid(), html); 
    } 

    render() { 
     return (
      <div className="tray tray-center"> 
       <div className="row"> 
        <div className="col-md-8"> 
         <div className="panel mb25 mt5"> 
          <div className="panel-heading"> 
           <span className="panel-title">Fixtures</span> 
           <p>A list of fixtures currently on the system, pulled in via ajax from Ratpack</p> 
          </div> 
          <div className="panel-body p20 pb10"> 
           <div id="fixture-parent" className="form-horizontal"> 
            <div className="form-group"> 
             <label className="control-label">Add Match</label> 
             <DatePicker 
              selected={this.state.startDate} 
              onChange={this.handleChange.bind(this)}/> 
            </div> 
           </div> 
          </div> 
          <button onClick={Fixtures.addMatch }>Add Match</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     ); 
    } 

    } 

    export default Fixtures; 

Answer 1

실제로는 DOM과 직접 상호 작용하지 않는 것이 좋습니다. 대신, 가지고있는 데이터에 따라 JSX를 수정해야한다. 대신, 당신이 그 기반으로 상태 표시 정보를 변경해야합니다 변경 상태에서 데이터를 HTML 태그를 추가하는 코드의 경우 : 구성 요소마다 상태 변경을 다시 렌더링하기 때문에

addMatch() { 
    //Add a start date to the list of starting dates 
    this.setState({ 
     listOfStartDates: [...this.state.listOfStartDates, newDate] 
    }); 
} 

render(){ 
    //For each starting date, generate a new 'match' as you called them 
    // note: this is the same as the stringyfied HTML tag OP had in the question 
    let listOfMatches = this.state.listOfStartDates.map((date)=>{ 
     return (
      <div className="form-group"> 
       <label className="control-label"> 
        Add Match 
       </label> 
       <DatePicker selected={date} onChange={this.handleChange.bind(this)} /> 
      </div> 
     ); 
    /* then in here your returned JSX would be just as OP originally had, with the exception that you would have {listOfMatches} where OP used to have the inserted list of HTML tags */ 
    return //... 
} 

을, 구성 요소에는 항상 시작 날짜만큼 많은 일치 항목이 있습니다.

희망 하시겠습니까?

Answer 2

사이에 공백을 넣어 DatePicker를 선택합니다.

"<DatePicker selected={this.state.startDate}onChange={this.handleChange.bind(this)}/></div>";