diff --git a/src/components/gird/main.js b/src/components/gird/main.js index 854421d8..444a83c2 100644 --- a/src/components/gird/main.js +++ b/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.setState({editShow:false}) } } onOk={()=>{ this.setState({editShow:false}) }} row={this.state.curRow} - /> - + { + this.state.editShow ? + ({ + this.setState({editShow:false}) } } onOk={(row)=>{ this.setState({editShow:false});console.log("当前数据行",row) }} row={this.state.curRow} + />) : null + }
diff --git a/src/components/gridEdit/main.js b/src/components/gridEdit/main.js index 63b43228..e45a273d 100644 --- a/src/components/gridEdit/main.js +++ b/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 ( - this.props.visible ? (
, + + const {pos}= this.props; + return( +
,
修改{this.props.title}
- + {this.textChange(e)}} />
{this.onCancel()}}>取消
{this.onOk()}}>确定
-
) : null +
) } } diff --git a/src/components/inputborder/main.css b/src/components/inputborder/main.css index 2abd1414..41ea2c13 100644 --- a/src/components/inputborder/main.css +++ b/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%; diff --git a/src/components/inputborder/main.js b/src/components/inputborder/main.js index 4991f9a9..39464802 100644 --- a/src/components/inputborder/main.js +++ b/src/components/inputborder/main.js @@ -4,23 +4,39 @@ import "./main.css" import { Icon ,Menu} from 'zent'; import _ from "lodash"; //tabbar组件机构{title:"",index:""} - - export default class gridEdit extends React.Component { + let inputdoing = false; + export default class inputborder 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 (
- {this.onChange(e)}} maxlength={60} /> -
{this.state.length}/60
+ {this.compositionstart(e)}} onCompositionEnd={(e)=>{this.compositionend(e)}} onInput = {(e)=>{this.onChange(e)}} maxlength={this.state.maxlength} type={"text"} /> +
{this.state.length}/{this.state.maxlength}
) }