React에서 편집 가능한 테이블
16220 단어 reactreactnativetutorialbeginners
React에서 편집 가능한 테이블 만들기
class EditableCell extends React.Component {
render() {
return (
<td>
<input type='text' name={this.props.cellData.type} id={this.props.cellData.id} value={this.props.cellData.value} onChange={this.props.onProductTableUpdate}/>
</td>
);
}
}
이제 <
class ListItems extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.state.list_items = [
{
id: 1,
name: 'PHP'
}, {
id: 2,
name: 'MYSQL'
}
];
}
handleUserInput(userInput) {
};
handleRowDel(list_item) {
var index = this.state.list_items.indexOf(list_item);
this.state.list_items.splice(index, 1);
this.setState(this.state.list_items);
};
handleAddEvent(evt) {
var id = (+ new Date() + Math.floor(Math.random() * 999999)).toString(36);
var list_item = {
id: id,
name: "",
}
this.state.list_items.push(list_item);
this.setState(this.state.list_items);
}
handlelistItemTable(evt) {
var item = {
id: evt.target.id,
name: evt.target.name,
value: evt.target.value
};
var list_items = this.state.list_items.slice();
var newlist_items = list_items.map(function(list_item) {
for (var key in list_item) {
if (key == item.name && list_item.id == item.id) {
list_item[key] = item.value;
}
}
return list_item;
});
this.setState({list_items:newlist_items});
};
render() {
var list_item = this.state.list_items.map(function(list_item) {
return (
<tr className="eachRow">
<EditableCell onlistItemTableUpdate={(e)=>this.handlelistItemTable(e)} cellData={{
"type": "name",
value: list_item.name,
id: list_item.id
}}/>
<td className="del-cell">
<input type="button" onClick={(list_item)=>this.handleRowDel(list_item)} value="X" className="del-btn"/>
</td>
</tr>
)
});
return (
<div>
<button type="button" onClick={(e)=>this.handleAddEvent(e)} className="btn btn-success pull-right">Add</button>
<table className="table table-bordered">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
{list_item}
</tbody>
</table>
</div>
);
}
}
ReactDOM.render( < ListItems / > , document.getElementById('container'));
구독 좋아요 공유와 긍정적인 피드백을 보내주세요.
더 많은 자습서를 보려면 visit my website .
감사:)
행복한 코딩 :)
Reference
이 문제에 관하여(React에서 편집 가능한 테이블), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/readymadecode/editable-table-in-react-3lbh텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
