Question

如何在点击时动态创建元素？

我想要实现的是一个类似表单的表单构建器。这个想法是我将有两个领域。第一个字段是我可以点击按钮来选择表单输入类型，可能是文本输入区域，选择框或单选按钮，当我点击该元素时，react会动态地为我创建该元素。

我不知道是否有人理解我，但我会感激任何回应。感谢

这就是我所做的，但我不是这是正确的反应方式

import React, {
Component
 } from 'react';
import ReactDOM from 'react-dom';

import logo from './logo.svg';
import './App.css';





 class App extends Component {
 constructor(props) {
  super()
}





onKeyUp = (e) => {


if (e.keyCode == 13) {


  let div = document.createElement("div");
  document.getElementById("preview").appendChild(div);
  ReactDOM.render(

    <
    div >
    <
    p > {
      this.text.value
    } < /p> <
    input type = "text"
    placeholder = "enter answer here" / > < /div>, div);

  }
}


shortText = (e) => {

  let div = document.createElement("div");
  document.getElementById("kiki").appendChild(div);

  ReactDOM.render( < input ref = {
      (input) => {
        this.text = input
      }
    }
    onKeyUp = {
      this.onKeyUp.bind(this, 'text')
    }
    type = "text"
    name = "text"
    placeholder = "short text field. Type question here!" / > , div);
  console.log()


}



render() {

  return ( <
    div className = "App" >
    <
    header className = "" >

    <
    /header>

    <
    div className = "row" >

    <
    div className = "col s2" >
    <
    h5 > Blocks < /h5>

    <
    ul className = "collection" >
    <
    li className = "collection-item textbox"
    onClick = {
      this.shortText.bind(this)
    } > short Text < /li>

    <
    /ul>


    <
    /div> <
    div className = "col s5"
    id = "forms" >

    <
    h5 > Form Screen < /h5>


    <
    div className = "collection"
    id = "kiki" >
    <
    form className = "col s12" >


    <
    /form> <
    /div> <
    /div> <
    div className = "col s5" >
    <
    h5 > dev preview < /h5>


    <
    div className = "collection" >
    <
    form id = "preview" >

    <
    /form>

    <
    /div> <
    /div> <
    /div>

    <
    /div>
  );
}
}

 export default App;

Answer 1

这下面的代码并不完美。我只是潦草地写下来了;

＆＃13;

import MyTextInput from './MyTextInput';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      myElements: []
    };
  }

  addElement = (type) => {
    let addThisElement;
    switch (type) {
      case 'textinput':
        addThisElement = React.createElement(MyTextInput, { /*props here*/ };
      default:
        break;
    }

    if (addThisElement) {
      this.setState(prevState => ({
        arrayvar: [...prevState.myElements, addThisElement]
      }));
    }
  }

  render() {
    const {
      myElements
    } = this.state;

    return (
      <div>
        <label> click to add TextInput </label>
        <button type="button" onClick={() => this.addElement('textinput')} >
          Add
        </button>

        <form>
          {myElements.map((el, index) => <el />)}
        </form >
      </div>

    );
  }
}

export default MyComponent;

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

＆＃13;

也许这会指向正确的方向？

Answer 2

<块引用>

在典型的 React 数据流中，props 是父组件与其子组件交互的唯一方式。要修改一个孩子，你可以用新的道具重新渲染它。但是，在某些情况下，您需要在典型数据流之外强制修改子项。要修改的子元素可以是 React 组件的实例，也可以是 DOM 元素。对于这两种情况，React 都提供了一个逃生舱。 - React Docs

我认为 React 文档 应该是您了解如何操作 DOM int react 的第一个地方。从这里开始：Refs and the DOM

我怎样才能在React中操纵Dom

2 个答案: