Javascript React.js：单击按钮添加/删除输入字段

React.js：单击按钮添加/删除输入字段：

当用户单击“添加”时，我希望添加一个新的输入字段

通过增加中间的数字，每个输入的name属性都在更改：

document-0-document 文件-1-文件

我收到以下错误：

“TypeError:这是未定义的var arr=this.state.documents；”

我知道是什么造成了错误，但我没有找到解决办法

HTML代码

<fieldset class="fieldset">
  <input type="file" name="document-0-document">
  <div class="more-documents">
    <input type="file" name="document-1-document">
    <button data-reactid=".0.1">Add</button>
  </div>
 </fieldset>

添加

主要部件代码：

class DocumentsFieldSet extends Component{

  constructor(props){
      super(props);
      this.state = {documents:[]}
  }

  add(i) {
      var arr  = this.state.documents;
      arr.push(i);
      this.setState({documents: arr});
  }

  eachDocument () {
      return <DocumentInput key={i}/>
  }

  render (){
      return (
        <div>
            {this.state.documents.map(this.eachDocument)}
            <button onClick={this.add.bind()}>Add</button>
        </div>
      )
  }
}

ReactDOM.render(<DocumentsFieldSet/>, document.querySelector ('.more-    documents'))

类文档字段集扩展组件{
建造师（道具）{
超级（道具）；
this.state={documents:[]}
}
加（i）{
var arr=this.state.documents；
arr.push（i）；
this.setState（{documents:arr}）；
}
每份文件（）{
返回
}
渲染（）{
返回(
{this.state.documents.map（this.eachDocument）}
添加
)
}
}
ReactDOM.render（，document.querySelector（'.more-documents'））

组件代码

class DocumentInput extends Component {
  render() {
      return <input type="file" name="document-{i}-document" ref="" />;
  }
}

export default DocumentInput;

类DocumentInput扩展组件{
render（）{
返回；
}
}
导出默认文档输入；

可能您忘记了将上下文传递到函数中

替换

<button onClick={this.add.bind()}>Add</button>

添加

到

添加

将您的

添加

函数编写为箭头函数。它会为您将函数绑定到此。阅读更多关于它的信息

此外，我还将您的函数改写为：

add = (i) => {
    const { documents } = this.state;
    documents.push(i);
    this.setState({ documents });
};

---

你的例子中有几个错误

您需要为

绑定
此
。添加

方法

您不需要将此.state.documents放入数组索引

在

DocumentInput

内部没有

i

变量

类DocumentInput扩展了React.Component{
render（）{
返回；
}
}
类文档FieldSet扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={
文件：[]
}
this.add=this.add.bind（this）；
}
添加（）{
const documents=this.state.documents.concat（DocumentInput）；
这个.setState（{documents}）；
}
渲染（）{
const documents=this.state.documents.map（（元素，索引）=>{
返回
});
返回
添加
{文件}
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);
。输入{
保证金：5px0；
填充：10px；
边框：2倍实心#000；
}

您想添加什么？这是正确的答案，为什么会被否决？我知道这并不理想，因为它会在每个渲染上创建一个全新的函数，但它是正确的！：）@PaoloMoretti你说得对，但我刚刚解决了他的问题：）这是一个，它不是ES2015的一部分，必须在
.babelrc
中手动启用，方法是添加
stage-1
或
transform class properties
单击add按钮后删除特定的字段集，就像+-。有可能吗。你能帮我一下，如何使用索引删除组件吗？
add = (i) => {
    var arr = this.state.documents;
    arr.push(i);
    this.setState({documents: arr});
};

add = (i) => {
    const { documents } = this.state;
    documents.push(i);
    this.setState({ documents });
};