如何在 React 中操纵 Dom

Question

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

我试图实现的是一个像Typeform这样的表单构建器。这个想法是我将有两个字段。第一个字段是我可以单击按钮以选择表单输入类型的地方，可能是文本输入区域、选择框或单选按钮，当我单击该元素时，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

下面的代码并不完美。我只是把它写下来;

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;

<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>

也许这会为你指明正确的方向？

Answer 2

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

我认为React 文档应该是你知道如何操作 DOMint 反应的第一个地方。 从这里开始：引用和 DOM