Question

例如，我正在尝试创建元素并尝试使用jquery，它可以与jquery一起使用，但是如何仅使用reactjs

$("#myButton").on("click", function() {
      $("#container").append('<div> <
        label > enter name < /label> <
        input onChange = {
          this.onInputChange
        }
        type = "text"
        placeholder = "what's your name" / >
        <
        /div>');
      });

<div>
  <label>enter name</label>
  <input onChange={this.onInputChange} type="text" placeholder="what's your name" />
</div>

我不想使用某些状态技巧，例如true show element，false not show。如果我想显示div的无限元素而不是10甚至怎么办？

我尝试使用此回调函数来尝试使用React.createElement() method

React.createElement("div", null, React.createElement("label", null, "enter name"), React.createElement("input", {
      onChange: this.onInputChange,
      type: "text",
      placeholder: "what's your name"
    }));

预期结果 在按钮上。单击“我只使用react并且只使用reactjs来创建元素并将其附加到父div中。”

Answer 1

从本质上讲，您仍应使用状态来跟踪受控输入，尤其是如果您打算通过单击按钮创建多个输入标签时，尤其如此。

在此处查看此沙箱：https://codesandbox.io/s/angry-taussig-c81dm

工作代码：

import React from "react";
import ReactDOM from "react-dom";
import uuid from "uuid";

import "./styles.css";

class App extends React.Component {
  state = {
    items: [{ id: uuid(), text: "" }]
  };

  addListItem = () => {
    const newItem = { id: uuid(), text: "" };
    this.setState({
      items: [...this.state.items, newItem]
    });
  };

  onInputChange = e => {
    const { id, value } = e.target;

    const newArr = this.state.items.map(item => {
      if (item.id == id) {
        return {
          ...item,
          text: value
        };
      } else {
        return item;
      }
    });

    this.setState({
      items: newArr
    });
  };

  createList = () => {
    const { items } = this.state;
    return items.map(item => {
      return (
        <div>
          <label>enter name</label>
          <input
            id={item.id}
            onChange={this.onInputChange}
            type="text"
            placeholder="what's your name"
            value={item.text}
          />
        </div>
      );
    });
  };

  render() {
    return (
      <div>
        {this.createList()}
        <button onClick={this.addListItem}>Add</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

注释：

state.items仅跟踪您创建的所有输入。每个输入都包含一个id和一个文本值。
createList()通过遍历状态来生成divs 列出项目。输入受到控制，这意味着它们与在我们的状态中的价值。（具有相同ID的对象）。
onInputChange()才能将事件值传递到右侧列表中的对象。

与强制创建不受控制的元素相比，它最终用于最大化JSX的功能及其与组件状态的关系。

如何在单击按钮时创建元素？

1 个答案: