时间戳

首页 > 解决方案 > React.js 向子组件添加组件

javascript - React.js 向子组件添加组件

问题描述

import FieldSect from "./fieldSect.js" 
<div>
  <FieldSect />
</div>

--FieldSect.js--

import Field from "./Field.js"
<div>
   <Field />
<button onclick={addField}> addField </field>
</div>

--Field.js--

function Field (){
    <div>
      <label> Test </label>
      <input type="text" />
    </div>

}

我的代码在 Field 立即加载并正确显示的部分工作。每当单击添加按钮时，我真的很想弄清楚如何<Field />在现有的组件下继续添加组件。<Field />我还需要确保有能力继续添加而不是拥有特定数量的可用

我也不能使用 DOM，因为我收到一个错误，告诉我编辑状态而不是使用 DOM.render

最终结果应如下所示：--FieldSect.js--

<div>
   <Field />
   ...<Field /> (Button Add Click)
   ...<Field /> (Button Add Click)
   ..
</div>

标签： javascriptreactjs

解决方案

干得好。

这保存<Fields />了受控组件状态的数量，可以使用按钮递增。

循环是通过创建一个nbrOfFields长度数组、解构然后映射来生成的。

const Field = () => (
  <div>
    <label> Test </label>
    <input type="text" />
  </div>
);

class App extends React.Component {
  constructor() {
    super();
    this.state = {nbrOfFields: 1};
    this.addField = this.addField.bind(this);
  }
  
  addField() {
    this.setState(prevState => ({nbrOfFields: prevState.nbrOfFields + 1}));
  }
  
  render() {
    return (
      <div>
        {[...Array(this.state.nbrOfFields)].map((item, i) => (
          <Field key={i} />
        ))}
        <button onClick={this.addField}>Add field</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

推荐阅读