更新

src/components/gird/main.js

@@ -464,7 +464,9 @@ export default class menu extends React.Component {
 			this.setState({pageLoading:false})
 		},500)
 	}
+	gridEditChange(e){
 		
+	}
 	render() {
 		const {
 			data,
@@ -651,13 +653,12 @@ export default class menu extends React.Component {
 					})
 				)
 			}
-			
+			{
-			
+			this.state.editShow ? 
-			
+			(<GridEdit  pos={this.state.postion}  title={this.state.edit_title} column={this.state.edit_column}  onCancel={()=>{
-			<GridEdit visible={this.state.editShow} pos={this.state.postion}  title={this.state.edit_title} column={this.state.edit_column}  onCancel={()=>{
+				this.setState({editShow:false}) } } onOk={(row)=>{     this.setState({editShow:false});console.log("当前数据行",row)        }}  row={this.state.curRow}
-				this.setState({editShow:false}) } } onOk={()=>{     this.setState({editShow:false})        }}  row={this.state.curRow}
+			 />) : null
-			 />
+			}
-			
 			<div className = "sortbar" >
 
 

src/components/gridEdit/main.js

@@ -9,31 +9,44 @@ import BorderInput from "../inputborder/main.js"
  export default class gridEdit extends React.Component {
  	constructor(props) {
  		super(props);
+		let row = JSON.parse( JSON.stringify(props.row))
+		console.log("列名",props.column)
 		this.state = {
 			visible: props.visible,
-			row:props.row
+			row:row ,
+			column:props.column,
+			text:props.row[props.column]
 		}
+		console.log(this.state.row)
  	}
 	onCancel(){
+		console.log("取消")
 		this.props.onCancel()
 	}
 	onOk(){
-		this.props.onOk()
+		console.log(this.state.row)
+		this.props.onOk(this.state.row)
 	}
+	textChange(e){
+		let row = this.state.row;
+		row[this.props.column] = e;
+	     this.setState({row:row})
 		
+	}
  	render() {
-	const  {pos,row,column}= this.props;
+		
- 		return (
+	const  {pos}= this.props;
-		this.props.visible ? (	<div className="gridEdit"  style={{"position":"absolute","top":pos.y + 10,"left":pos.x + 10}}  >,
+	return(
+ 			<div className="gridEdit"  style={{"position":"absolute","top":pos.y + 10,"left":pos.x + 10}}  >,
 		<div className="gridEdit-title">修改{this.props.title}</div>
 		<div className="gridEdit-content">
-		  <BorderInput text={row[column]}/>
+		  <BorderInput text={this.state.text}  onChange={(e)=>{this.textChange(e)}} />
 		</div>
 		<div className="btn-group">
 		<div className="btn-cancel" onClick={(e)=>{this.onCancel()}}>取消</div>
 		<div className="btn-current" onClick={(e)=>{this.onOk()}}>确定</div>
 		</div>
-		</div>) : null
+		</div>
  		)
  	}
  }

src/components/inputborder/main.css

@@ -7,6 +7,13 @@
 	border: 1px solid #dfe1e6;
 	display: flex;
 }
+.border-input:focus-within{
+	border: 1px solid #2B66F2;
+}
+
+
+
+
 .border-input input{
 	width: 85%;
 	height: 100%;

src/components/inputborder/main.js

@@ -4,23 +4,39 @@ import "./main.css"
 import { Icon ,Menu} from 'zent';
 import _ from "lodash";
  //tabbar组件机构{title:"",index:""}
+ 	 let inputdoing = false;
+ export default class inputborder extends React.Component {
 
- export default class gridEdit extends React.Component {
  	constructor(props) {
  		super(props);
 		this.state = {
 			text: props.text,
-			length:props.text.length
+			length:props.text.length,
+			maxlength:24
 		}
  	}
 	onChange(e){
 		this.setState({text:e.target.value})
+		if(!this.inputdoing)
+		{
+			this.setState({length:this.state.text.length})
+		}
+		this.props.onChange(e.target.value)
+	}
+	
+	compositionstart(e){
+		this.inputdoing = true;
+	}
+		
+	compositionend(e){
+		this.inputdoing = false;
+		this.setState({length:this.state.text.length})
 	}
  	render() {
  		return (
 		  <div className="border-input">
-		   <input value={this.state.text} onChange = {(e)=>{this.onChange(e)}}  maxlength={60} />
+		   <input value={this.state.text}  onCompositionStart={(e)=>{this.compositionstart(e)}} onCompositionEnd={(e)=>{this.compositionend(e)}}    onInput = {(e)=>{this.onChange(e)}}  maxlength={this.state.maxlength} type={"text"} />
-		   <div className="input-label">{this.state.length}/60</div>
+		   <div className="input-label">{this.state.length}/{this.state.maxlength}</div>
 		  </div>
  		)
  	}