React.js:点击按钮添加/删除输入字段:
当用户点击添加时,我想要添加一个新的输入字段。
name属性正在针对每个输入进行更改,方法是增加中间的数字:
文档0文档 文档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'))
组件代码
class DocumentInput extends Component {
render() {
return <input type="file" name="document-{i}-document" ref="" />;
}
}
export default DocumentInput;
答案 0 :(得分:11)
你的例子中有几个错误
您需要为this
方法
.add
您没有放入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>
答案 1 :(得分:3)
也许您忘了将上下文传递给bind
函数。
替换
<button onClick={this.add.bind()}>Add</button>
到
<button onClick={this.add.bind(this)}>Add</button>
答案 2 :(得分:0)
将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 });
};