React.js:点击按钮即可添加/删除输入字段

React.js: Add/Remove input field on click of a button

本文关键字：添加 删除 输入 字段 js 按钮 React      更新时间：2023-09-26

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

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

通过增加中间的数字，每个输入的名称属性都会发生变化：

document-0-文档document-1-文档

我收到以下错误：

"TypeError：这是未定义的var arr=this.state.docdocuments；"

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

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;

您在示例中有几个错误

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

  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>

也许您忘记了将上下文传递到bind函数中。

更换

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

至

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

将add函数写成箭头函数。它将为您将函数绑定到this。在这里阅读更多关于

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 });
};
相关文章：