Question

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>

Answer 1

您应该让Fields成为父组件状态的一部分，也许作为数组this.state = {fields:[{id:1},{id:2},{id:3}]}。

然后，在渲染时，您可以遍历数组：

<div>
   {this.state.fields.map(f => <Field key={f.id}/>)}
</div>

Answer 2

它超级简单。

例如具有默认状态的字段，假设您想在开头添加1个字段

this.state = {
 fields: [<Field/>]
}

现在为onClick使用AddClick事件和如下功能

handleOnClick=(event)=>this.setState(prevState=>({...prevState, fields: [...prevState.fields, <Field/>]})

然后在渲染函数中迭代fields array

PS：我不确定Field在做什么。

我要做的是渲染

<div>
   {this.state.fields.map(field => <Field {...field}/>)}
</div>

并且字段将是字段的数据

Answer 3

如果我对您的理解正确，那么您希望在每次有人单击按钮时添加一个。如果这是正确的，那么我只需向FieldSect.js或父文件（在Field.js之前的某处）添加一个具有状态的构造函数，以创建可跟踪状态。像这样：

this.state = {
        NumberOfFields: 1
    };

如果您在FieldSect.js之前执行此操作，则需要将其传递给props。

现在，您需要设置onClick函数来增加此状态。然后，您可以使用它在FieldSect.js中创建一个循环，该循环创建将在React中呈现的元素数组。

let array = []
for(let i = 0; i < this.NumberOfFields; i++){
  array.push(<Field key={Math.random()}/>)
}

然后，使用{array}。而不是在FieldSect.js中使用。

我将key属性添加到Field的原因是，像这样的迭代派生的所有元素都必须具有唯一的键。

Answer 4

你在这里。

在受控组件的状态下，它保存<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>

React.js向子组件添加组件

4 个答案: