React.js：添加/上一个按钮，点击删除输入字段

Question

React.js：添加/上一个按钮，点击删除输入字段：

当用户单击添加，我希望有一个新的输入字段是添加。

文档0文档 文档1的文档

我收到以下错误：

name属性在中途改变对于每个输入，通过增量数“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')) 

组件代码

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

export default DocumentInput; 

Answer 1

你有几个错误在你的榜样

1. 你需要绑定this为.add方法

2. 你不把到this.state.documents数组索引

3. 里面DocumentInput没有i可变

class DocumentInput extends React.Component { 
 
    render() { 
 
    return <input 
 
     type="file" 
 
     name={ `document-${ this.props.index }-document` } 
 
    />; 
 
    } 
 
} 
 

 
class DocumentsFieldSet extends React.Component{ 
 
    constructor(props){ 
 
    super(props); 
 

 
    this.state = { 
 
     documents: [] 
 
    } 
 
    
 
    this.add = this.add.bind(this); 
 
    } 
 

 
    add() { 
 
    const documents = this.state.documents.concat(DocumentInput); 
 
    this.setState({ documents }); 
 
    } 
 
    
 
    render() { 
 
    const documents = this.state.documents.map((Element, index) => { 
 
     return <Element key={ index } index={ index } /> 
 
    }); 
 

 
    return <div> 
 
     <button onClick={ this.add }>Add</button> 
 
    
 
     <div className="inputs"> 
 
     { documents } 
 
     </div> 
 
    </div> 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <DocumentsFieldSet />, 
 
    document.getElementById('container') 
 
);

.inputs { 
 
    margin: 5px 0; 
 
    padding: 10px; 
 
    border: 2px solid #000; 
 
}

<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> 
 
<div id="container"></div>

Answer 2

也许你忘了上下文传递到bind功能。

更换

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

到

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

Answer 3

撰写您add功能为箭头的功能。它会为你绑定功能this。了解更多关于它here

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 }); 
};