[英]React.js: Add/Remove input field on click of a button
React.js:单击按钮时添加/删除输入字段:
当用户单击“添加”时,我希望添加新的输入字段。
name属性正在针对每个输入进行更改,通过增加中间的数字:
document-0-document document-1-document
我收到以下错误:
“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;
你的例子中有几个错误
你需要为.add
方法绑定this
你没有把this.state.documents
数组索引
在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 });
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.