react实现table表格增删改效果代码-html代码-BFW代码库

react实现table表格增删改效果代码

代码语言：html

所属分类：表格

代码描述：react实现table表格增删改效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
  
<style>
body {
  padding: 1em;
}

.form-control {
  display: inline-block;
  max-width: 80%;
}

.react-table-container button {
  margin-bottom: 0.5em;
}

.react-table td button {
  margin-left: 1em;
}
</style>


</head>

<body>
  <div id="wrapper">
  <div id="app"></div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.15.4.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.15.4.2.js"></script>
      <script type="text/babel" >
class IDGenerator {
  constructor() {
    this.count = 0
  }
  
  getID() {
    this.count++
    if (this.count === 10) {
      this.count = 0
    }
    return Date.now().toString() + this.count.toString()
  }
}

var uniqueID = new IDGenerator()

class ReactTableFieldInput extends React.Component {
  constructor(props) {
    super(props)
    
    this.state = { data: this.props.data }
    this.prevValue = this.props.data
    this.handleChange = this.handleChange.bind(this)
    this.handleKeyDown = this.handleKeyDown.bind(this)
    this.saveData = this.saveData.bind(this)
    this.cancelSave = this.cancelSave.bind(this)
  }
  
  componentDidMount() {
    this.refs.text.focus()
  }
  
  handleChange(e) {
    this.props.onChange(e.target.value)
  }
  
  handleKeyDown(e) {
    if (e.keyCode === 13) {
      this.saveData()
    } else if (e.keyCode === 27) {
      this.cancelSave()
    }
  }
  
  saveData() {
    this.prevValue = this.refs.text.value
    this.props.onSave()
  }
  
  cancelSave() {
    this.props.onChange(this.prevValue)
    this.refs.text.value = this.prevValue
    this.props.onSave()
  }
  
  render() {
    return ( <span>
        <input ref="text" className="form-control" type="text" value={this.props.data} onChange={this.handleChange} onKeyDown={this.handleKeyDown} />
      <button type="button" className="btn btn-primary" onClick={this.saveData}>OK</button>
      <button type="button" className="btn btn-danger" onClick={this.cancelSave}>X</button>
      </span> )
  }
}

class ReactTableField extends React.Component {
  constructor(props) {
    super(props)
    
    this.state = { data: this.props.data, editing: false }
    this.handleClick = this.handleClick.bind(this)
    this.handleChange = this.handleChange.bind(this)
    this.handleSave = this.handleSave.bind(this)
  }
  
  handleClick(e) {
    if (this.state.editing === false) {
      this.setState({ editing: true })
    }
  }
  
  handleChange(val) {
    this.setState({ d.........完整代码请登录后点击上方下载按钮下载查看