如何在 ReactJs 中追加到表
How to append to a table in ReactJs
我有以下代码
var data = [{
id: 1,
taskName: "Pete Hunt",
standarDescription: "This is one comment",
emplComment: "meaaow I am meeawo",
empRating: "1"
}, {
id: 2,
taskName: "Pete Hunt",
standarDescription: "This is one comment",
emplComment: "meaaow I am meeawo",
empRating: "1"
}, {
id: 3,
taskName: "Pete Hunt",
standarDescription: "This is one comment",
emplComment: "meaaow I am meeawo",
empRating: "1"
}, {
id: 4,
taskName: "Pete Hunt",
standarDescription: "This is one comment",
emplComment: "meaaow I am meeawo",
empRating: "1"
}, {
id: 5,
taskName: "Pete Hunt",
standarDescription: "This is one comment",
emplComment: "meaaow I am meeawo",
empRating: "1"
}];
var TableforbasictaskForm = React.createClass({
getInitialState: function() {
return {
taskName: '',
description: '',
empComment: '',
emprating: ''
};
},
handletaskNameChange: function(e) {
this.setState({
taskName: e.target.value
});
},
handledescriptionChange: function(e) {
this.setState({
description: e.target.value
});
},
handleempCommentChange: function(e) {
this.setState({
empComment: e.target.value
});
},
handleempratingChange: function(e) {
this.setState({
emprating: e.target.value
});
},
handleSubmit: function(e) {
e.preventDefault();
var taskName = this.state.taskName.trim();
var description = this.state.description.trim();
var empComment = this.state.empComment.trim();
var emprating = this.state.emprating;
if (!taskName || !description || !empComment || !emprating) {
alert('all the field have to be field');
return;
}
this.props.onCommentSubmit({
taskName: taskName,
description: description,
empComment: empComment,
emprating: emprating
});
this.setState({
taskName: '',
description: '',
empComment: '',
emprating: ''
});
},
render: function() {
return ( < div className = "row margin-bottom" >
< form className = "col-md-12"
onSubmit = {
this.handleSubmit
} >
< div className = "col-md-2" >
< input className = "form-control "
type = "text"
placeholder = "Task name"
value = {
this.state.taskName
}
onChange = {
this.handletaskNameChange
}
/> < /div> < div className = "col-md-3" >
< textarea className = "form-control"
name = "description"
placeholder = "Standard Discription of task"
value = {
this.state.description
}
onChange = {
this.handledescriptionChange
}
/> < /div> < div className = "col-md-3" >
< textarea className = "form-control"
name = "empComment"
placeholder = "Employee Comment"
value = {
this.state.empComment
}
onChange = {
this.handleempCommentChange
}
/> < /div>
< div className = "col-md-2" >
< select className = "form-control"
name = "emprating"
value = {
this.state.emprating
}
onChange = {
this.handleempratingChange
} >
< option value = "" > Employee Ratings < /option> < option value = "1" > 1 < /option> < option value = "2" > 2 < /option> < option value = "3" > 3 < /option> < option value = "4" > 4 < /option> < option value = "5" > 5 < /option> < /select> < /div> < div className = "col-md-2" >
< input className = "form-control"
type = "submit"
value = "Post" / >
< /div> < /form> < /div>
);
}
});
var Addcontenttotable = React.createClass({
render: function() {
return ( < tr > < td > {
this.props.taskName
} < /td> < td > {
this.props.standarDescription
} < /td> < td > {
this.props.emplComment
} < /td> < td > {
this.props.empRating
} < /td> < /tr>);
}
});
var TableforbasictaskList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function(comment) {
return ( < Addcontenttotable taskName = {
comment.taskName
}
standarDescription = {
comment.standarDescription
}
emplComment = {
comment.emplComment
}
empRating = {
comment.empRating
}
key = {
comment.id
} >
< /Addcontenttotable>
);
});
return ( < tbody > {
commentNodes
} < /tbody>);
}
});
var Tableforbasictask = React.createClass({
render: function() {
return ( < div className = "downloadlinks" >
< table className = "table table-bordered table-striped-col nomargin"
id = "table-data" >
< thead >
< tr align = "center" >
< td > Task Name < /td> < td > Standard Discription of Task < /td> < td > Employee Comment < /td> < td > Employee rating < /td> < /tr> < /thead>
< TableforbasictaskList data = {
this.props.data
}
/> < /table> < TableforbasictaskForm / >
< /div>
);
}
});
ReactDOM.render( < div className="row"> < Tableforbasictask data = {
data
}
/></div > , document.getElementById('content'));
我想在提交表格时向表格添加新行。
这是一个小提琴链接
我在这里更新了您的代码以使其正常工作
var Tableforbasictask = React.createClass({
getInitialState: function() {
return {data:this.props.data};
},
handleSubmit: function(comment){
comment.id=this.state.data.length+1;
this.setState({data:this.state.data.concat(comment)});
},
render: function() {
return ( < div className = "downloadlinks" >
< table className = "table table-bordered table-striped-col nomargin"
id = "table-data" >
< thead >
< tr align = "center" >
< td > Task Name < /td> < td > Standard Discription of Task < /td> < td > Employee Comment < /td> < td > Employee rating < /td> < /tr> < /thead>
< TableforbasictaskList data = {
this.state.data
}
/> < /table> < TableforbasictaskForm onCommentSubmit={this.handleSubmit} / >
< /div>
);
}
});
基本思想是Tableforbasictask
组件具有一个状态,该状态作为传递给它props.data
组件将其内部方法handleSubmit
传递给TableforbasictaskForm
作为props.onCommentSubmit
,这将使用新注释更新Tableforbasictask's
状态。
您必须创建一个更高的状态(例如此处Tableforbasictask
(,该状态将被修改,并在添加新元素时保持表更新。 然后,添加以创建回调onCommentSubmit
以更新此状态:
var data = [{
id: 1,
taskName: "Pete Hunt",
standarDescription: "This is one comment",
emplComment: "meaaow I am meeawo",
empRating: "1"
}, {
id: 2,
taskName: "Pete Hunt",
standarDescription: "This is one comment",
emplComment: "meaaow I am meeawo",
empRating: "1"
}, {
id: 3,
taskName: "Pete Hunt",
standarDescription: "This is one comment",
emplComment: "meaaow I am meeawo",
empRating: "1"
}, {
id: 4,
taskName: "Pete Hunt",
standarDescription: "This is one comment",
emplComment: "meaaow I am meeawo",
empRating: "1"
}, {
id: 5,
taskName: "Pete Hunt",
standarDescription: "This is one comment",
emplComment: "meaaow I am meeawo",
empRating: "1"
}];
var TableforbasictaskForm = React.createClass({
getInitialState: function() {
return {
taskName: '',
description: '',
empComment: '',
emprating: ''
};
},
handletaskNameChange: function(e) {
this.setState({
taskName: e.target.value
});
},
handledescriptionChange: function(e) {
this.setState({
description: e.target.value
});
},
handleempCommentChange: function(e) {
this.setState({
empComment: e.target.value
});
},
handleempratingChange: function(e) {
this.setState({
emprating: e.target.value
});
},
handleSubmit: function(e) {
e.preventDefault();
var taskName = this.state.taskName.trim();
var description = this.state.description.trim();
var empComment = this.state.empComment.trim();
var emprating = this.state.emprating;
if (!taskName || !description || !empComment || !emprating) {
alert('all the field have to be field');
return;
}
this.props.onCommentSubmit({
taskName: taskName,
description: description,
empComment: empComment,
emprating: emprating
});
this.setState({
taskName: '',
description: '',
empComment: '',
emprating: ''
});
},
render: function() {
return ( < div className = "row margin-bottom" >
< form className = "col-md-12"
onSubmit = {
this.handleSubmit
} >
< div className = "col-md-2" >
< input className = "form-control "
type = "text"
placeholder = "Task name"
value = {
this.state.taskName
}
onChange = {
this.handletaskNameChange
}
/> < /div> < div className = "col-md-3" >
< textarea className = "form-control"
name = "description"
placeholder = "Standard Discription of task"
value = {
this.state.description
}
onChange = {
this.handledescriptionChange
}
/> < /div> < div className = "col-md-3" >
< textarea className = "form-control"
name = "empComment"
placeholder = "Employee Comment"
value = {
this.state.empComment
}
onChange = {
this.handleempCommentChange
}
/> < /div>
< div className = "col-md-2" >
< select className = "form-control"
name = "emprating"
value = {
this.state.emprating
}
onChange = {
this.handleempratingChange
} >
< option value = "" > Employee Ratings < /option> < option value = "1" > 1 < /option> < option value = "2" > 2 < /option> < option value = "3" > 3 < /option> < option value = "4" > 4 < /option> < option value = "5" > 5 < /option> < /select> < /div> < div className = "col-md-2" >
< input className = "form-control"
type = "submit"
value = "Post" / >
< /div> < /form> < /div>
);
}
});
var Addcontenttotable = React.createClass({
render: function() {
return ( < tr > < td > {
this.props.taskName
} < /td> < td > {
this.props.standarDescription
} < /td> < td > {
this.props.emplComment
} < /td> < td > {
this.props.empRating
} < /td> < /tr>);
}
});
var TableforbasictaskList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function(comment) {
return ( < Addcontenttotable taskName = {
comment.taskName
}
standarDescription = {
comment.standarDescription
}
emplComment = {
comment.emplComment
}
empRating = {
comment.empRating
}
key = {
comment.id
} >
< /Addcontenttotable>
);
});
return ( < tbody > {
commentNodes
} < /tbody>);
}
});
var Tableforbasictask = React.createClass({
getInitialState(){
return {
data:this.props.data
}
},
onCommentSubmit(newData){
this.setState({
data:data.concat(newData)
});
},
render: function() {
return ( < div className = "downloadlinks" >
< table className = "table table-bordered table-striped-col nomargin"
id = "table-data" >
< thead >
< tr align = "center" >
< td > Task Name < /td> < td > Standard Discription of Task < /td> < td > Employee Comment < /td> < td > Employee rating < /td> < /tr> < /thead>
< TableforbasictaskList data = {
this.state.data
}
/> < /table> < TableforbasictaskForm onCommentSubmit={this.onCommentSubmit}/ >
< /div>
);
}
});
ReactDOM.render( < div className="row"> < Tableforbasictask data = {
data
}
/></div > , document.getElementById('content'));
相关文章:
- 表追加而不附加最后一个元素
- 如何在ReactJS JSX中执行嵌套的if-else语句
- 拨打'父亲'函数形式a'儿童'ReactJS中的组件
- ReactJS映射:如何仅在url变量不为空时呈现html链接
- 如何更改reactjs中外部/独立组件的状态或属性
- ReactJS和SpringDataRest缓存问题可能与websocket有关
- reactjs this.refs vs document.getElementById
- 同构reactjs-cdn资产
- 如何在jquery中停止在更改时追加值
- 在ReactJS中重新渲染孩子3次可以接受吗
- JQuery.on(“keydown”)追加到页面时不工作
- 如何在ReactJs中显示Json数据
- 将IndexedDB中的数据拉入数组,并通过ReactJS输出
- 如何在ReactJs中渲染子组件时重新加载子组件的数据
- 如何在ReactJs中链接下拉列表和文本区域
- 如何在ReactJs中呈现选定选项的更改表
- 在select上呈现不同形式的reactjs
- onClick事件未触发reactjs
- jQuery[button.class]未检测到用按钮追加行
- 如何在 ReactJs 中追加到表