From 9f54449939b543f661ff10676e1539e90b8e8bef Mon Sep 17 00:00:00 2001 From: cuiwenlong7 Date: Sun, 9 Jan 2022 23:25:54 +0800 Subject: [PATCH 1/5] =?UTF-8?q?feat:=E8=BE=93=E5=85=A5=E6=A1=86=E9=98=B2?= =?UTF-8?q?=E6=8A=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/formFields/text/commontext.tsx | 69 +++++++++++++------ 1 file changed, 47 insertions(+), 22 deletions(-) diff --git a/src/components/formFields/text/commontext.tsx b/src/components/formFields/text/commontext.tsx index a3e1f57..a752d11 100644 --- a/src/components/formFields/text/commontext.tsx +++ b/src/components/formFields/text/commontext.tsx @@ -13,19 +13,31 @@ export default class TextComponent extends PureComponent { isOnComposition = false selectionStart: number | null = null selectionEnd: number | null = null + timer: NodeJS.Timeout | null = null + ref: any state = { + time: 0, // 暂时埋点统计时间用 + wait: false, flag: false, input: this.props.value || '', - firstCompositon: true + firstComposition: true } - +componentDidUpdate (prevProps: any, prevState: any) { // 对标ccms的ts + const DidUpdateTime = (new Date().getTime() - prevState.time)/1000 + if (prevProps.value != this.props.value && prevState.wait === false) { + this.setState({time: DidUpdateTime}) + this.ref.input.selectionStart = this.selectionStart + this.ref.input.selectionEnd = this.selectionEnd + console.log("%c耗时"+DidUpdateTime+"s", "color:red;font-size:30px;width:200px;height:200px;background-color:green") + } +} handleComposition = (e: any) => { - const { flag, firstCompositon } = this.state - if (firstCompositon) { + const { flag, firstComposition } = this.state + if (firstComposition) { e.target.value = this.props.value this.setState({ - firstCompositon: false + firstComposition: false }) } @@ -47,52 +59,65 @@ export default class TextComponent extends PureComponent { } else { this.isOnComposition = true } + if (flag !== this.isOnComposition) { + this.setFlag(this.isOnComposition) + } } setFlag = (flag: boolean) => { this.setState({ - flag: flag + flag: this.isOnComposition }) } setInput = (value: string) => { this.setState({ - input: value + input: value, + wait: true }) } handleChange = (e: React.ChangeEvent) => { - this.setFlag(true) + const { onChange } = this.props + const value = e.target.value + this.selectionStart = e.target.selectionStart + this.selectionEnd = e.target.selectionEnd this.setInput(e.target.value) + if (this.isOnComposition) return + if (this.timer !== null) clearTimeout(this.timer) + this.timer = setTimeout(() => { + this.setState({ + wait: false + }) + this.setState({time: new Date().getTime()}) + + onChange && onChange(value) + }, 200) } render() { const { value, readonly, disabled, placeholder } = this.props - const { flag, input } = this.state + const { wait, flag, input } = this.state const Component = Input return { this.ref= e }} readOnly={readonly} disabled={disabled} placeholder={placeholder} - value={!flag ? value : input} + value={!flag && !wait ? value : input} onCompositionStart={this.handleComposition} onCompositionUpdate={this.handleComposition} onCompositionEnd={this.handleComposition} onChange={(e) => { - this.selectionStart = e.target.selectionStart - this.selectionEnd = e.target.selectionEnd - const eTaget = e.target + // this.selectionStart = e.target.selectionStart + // this.selectionEnd = e.target.selectionEnd + // const eTaget = e.target this.handleChange(e) - setTimeout(() => { - eTaget.selectionStart = this.selectionStart - eTaget.selectionEnd = this.selectionEnd - }) - }} - onBlur={(e) => { - const { onChange } = this.props - onChange && onChange(e.target.value) - this.setFlag(false) + // setTimeout(() => { + // eTaget.selectionStart = this.selectionStart + // eTaget.selectionEnd = this.selectionEnd + // }) }} /> } -- Gitee From 5219d0b02dea675cfb2138d450d60eabd87c91d3 Mon Sep 17 00:00:00 2001 From: cuiwenlong7 Date: Fri, 14 Jan 2022 16:06:52 +0800 Subject: [PATCH 2/5] =?UTF-8?q?fix:=20onchange=E5=85=89=E6=A0=87=E4=BD=8D?= =?UTF-8?q?=E7=BD=AE=E8=BF=98=E5=8E=9F=E3=80=81=E5=8E=BB=E9=99=A4=E6=97=B6?= =?UTF-8?q?=E9=97=B4=E6=89=93=E7=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/formFields/text/commontext.tsx | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/src/components/formFields/text/commontext.tsx b/src/components/formFields/text/commontext.tsx index a752d11..0621c5e 100644 --- a/src/components/formFields/text/commontext.tsx +++ b/src/components/formFields/text/commontext.tsx @@ -15,21 +15,16 @@ export default class TextComponent extends PureComponent { selectionEnd: number | null = null timer: NodeJS.Timeout | null = null ref: any - state = { - time: 0, // 暂时埋点统计时间用 wait: false, flag: false, input: this.props.value || '', firstComposition: true } -componentDidUpdate (prevProps: any, prevState: any) { // 对标ccms的ts - const DidUpdateTime = (new Date().getTime() - prevState.time)/1000 +componentDidUpdate (prevProps: Props, prevState: any) { if (prevProps.value != this.props.value && prevState.wait === false) { - this.setState({time: DidUpdateTime}) this.ref.input.selectionStart = this.selectionStart this.ref.input.selectionEnd = this.selectionEnd - console.log("%c耗时"+DidUpdateTime+"s", "color:red;font-size:30px;width:200px;height:200px;background-color:green") } } handleComposition = (e: any) => { @@ -88,10 +83,9 @@ componentDidUpdate (prevProps: any, prevState: any) { // 对标ccms的ts this.setState({ wait: false }) - this.setState({time: new Date().getTime()}) onChange && onChange(value) - }, 200) + }, 100) } render() { @@ -110,14 +104,7 @@ componentDidUpdate (prevProps: any, prevState: any) { // 对标ccms的ts onCompositionUpdate={this.handleComposition} onCompositionEnd={this.handleComposition} onChange={(e) => { - // this.selectionStart = e.target.selectionStart - // this.selectionEnd = e.target.selectionEnd - // const eTaget = e.target this.handleChange(e) - // setTimeout(() => { - // eTaget.selectionStart = this.selectionStart - // eTaget.selectionEnd = this.selectionEnd - // }) }} /> } -- Gitee From df47f9e2bee1771b55abf4d680345de72287296a Mon Sep 17 00:00:00 2001 From: cuiwenlong7 Date: Fri, 11 Feb 2022 12:50:13 +0800 Subject: [PATCH 3/5] =?UTF-8?q?fix=EF=BC=9Atype=20State?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/formFields/text/commontext.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/formFields/text/commontext.tsx b/src/components/formFields/text/commontext.tsx index 0621c5e..68adecd 100644 --- a/src/components/formFields/text/commontext.tsx +++ b/src/components/formFields/text/commontext.tsx @@ -8,7 +8,12 @@ type Props = { placeholder?: string onChange: (value: string) => Promise }; - +type State = { + wait: boolean + flag: boolean + input: string + firstComposition: boolean +} export default class TextComponent extends PureComponent { isOnComposition = false selectionStart: number | null = null @@ -21,7 +26,7 @@ export default class TextComponent extends PureComponent { input: this.props.value || '', firstComposition: true } -componentDidUpdate (prevProps: Props, prevState: any) { +componentDidUpdate (prevProps: Props, prevState: State) { if (prevProps.value != this.props.value && prevState.wait === false) { this.ref.input.selectionStart = this.selectionStart this.ref.input.selectionEnd = this.selectionEnd @@ -61,7 +66,7 @@ componentDidUpdate (prevProps: Props, prevState: any) { setFlag = (flag: boolean) => { this.setState({ - flag: this.isOnComposition + flag: flag }) } -- Gitee From ea03338f22cce6094bf4937a142189be0c0edc1e Mon Sep 17 00:00:00 2001 From: cuiwenlong7 Date: Wed, 30 Mar 2022 17:25:18 +0800 Subject: [PATCH 4/5] =?UTF-8?q?fix:=20longtext=E5=85=89=E6=A0=87=E5=A4=8D?= =?UTF-8?q?=E4=BD=8D=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../formFields/longtext/commontext.tsx | 79 +++++++++++++++---- src/components/formFields/text/commontext.tsx | 10 +-- 2 files changed, 68 insertions(+), 21 deletions(-) diff --git a/src/components/formFields/longtext/commontext.tsx b/src/components/formFields/longtext/commontext.tsx index d57d2a2..8c51fda 100644 --- a/src/components/formFields/longtext/commontext.tsx +++ b/src/components/formFields/longtext/commontext.tsx @@ -8,19 +8,53 @@ type Props = { disabled?: boolean placeholder?: string onChange: (value: string) => Promise -}; - +} +type State = { + wait: boolean + flag: boolean + input: string + firstComposition: boolean +} export default class TextComponent extends PureComponent { isOnComposition = false - + selectionStart: number | null = null + selectionEnd: number | null = null + timer: NodeJS.Timeout | null = null + ref: any state = { + wait: false, flag: false, - input: '' + input: this.props.value || '', + firstComposition: true + } + componentDidUpdate (prevProps: Props, prevState: State) { + if (prevProps.value != this.props.value && prevState.wait === false) { + this.ref.input.selectionStart = this.selectionStart + this.ref.input.selectionEnd = this.selectionEnd + } } - handleComposition = (e: any) => { - const { flag } = this.state - if (e.type === 'compositionend') { + const { flag, firstComposition } = this.state + if (firstComposition) { + e.target.value = this.props.value + this.setState({ + firstComposition: false + }) + } + + if ('compositionstart' === e.type) { + if (e.target.value && (e.target.value != 'undefined')) { + this.setState({ + input: e.target.value || '' + }) + }else{ + this.setState({ + input: '' + }) + } + } + + if ('compositionend' === e.type) { this.isOnComposition = false this.handleChange(e) } else { @@ -33,38 +67,51 @@ export default class TextComponent extends PureComponent { setFlag = (flag: boolean) => { this.setState({ - flag: this.isOnComposition + flag: flag }) } setInput = (value: string) => { this.setState({ - input: value + input: value, + wait: true }) } - - handleChange = (e: any) => { + + handleChange = (e: React.ChangeEvent) => { const { onChange } = this.props + const value = e.target.value + this.selectionStart = e.target.selectionStart + this.selectionEnd = e.target.selectionEnd this.setInput(e.target.value) if (this.isOnComposition) return - onChange && onChange(e.target.value) + if (this.timer !== null) clearTimeout(this.timer) + this.timer = setTimeout(() => { + this.setState({ + wait: false + }) + + onChange && onChange(value) + }, 100) } render () { const { value, readonly, disabled, placeholder } = this.props - const { flag, input } = this.state + const { wait, flag, input } = this.state const Component = TextArea return { this.ref= e }}readOnly={readonly} disabled={disabled} placeholder={placeholder} - value={!flag ? value : input} + value={!flag && !wait ? value : input} onCompositionStart={this.handleComposition} onCompositionUpdate={this.handleComposition} onCompositionEnd={this.handleComposition} - onChange={this.handleChange} + onChange={(e) => { + this.handleChange(e) + }} /> } } diff --git a/src/components/formFields/text/commontext.tsx b/src/components/formFields/text/commontext.tsx index 68adecd..be4f16e 100644 --- a/src/components/formFields/text/commontext.tsx +++ b/src/components/formFields/text/commontext.tsx @@ -26,12 +26,12 @@ export default class TextComponent extends PureComponent { input: this.props.value || '', firstComposition: true } -componentDidUpdate (prevProps: Props, prevState: State) { - if (prevProps.value != this.props.value && prevState.wait === false) { - this.ref.input.selectionStart = this.selectionStart - this.ref.input.selectionEnd = this.selectionEnd + componentDidUpdate (prevProps: Props, prevState: State) { + if (prevProps.value != this.props.value && prevState.wait === false) { + this.ref.input.selectionStart = this.selectionStart + this.ref.input.selectionEnd = this.selectionEnd + } } -} handleComposition = (e: any) => { const { flag, firstComposition } = this.state if (firstComposition) { -- Gitee From 9cc6342e7c45b73f99f469d51e8bc2a573d8ff4b Mon Sep 17 00:00:00 2001 From: cuiwenlong7 Date: Wed, 30 Mar 2022 17:53:15 +0800 Subject: [PATCH 5/5] =?UTF-8?q?fix:=20longText=E5=8F=96resizableTextArea.t?= =?UTF-8?q?extArea?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/formFields/longtext/commontext.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/formFields/longtext/commontext.tsx b/src/components/formFields/longtext/commontext.tsx index 8c51fda..7d2c619 100644 --- a/src/components/formFields/longtext/commontext.tsx +++ b/src/components/formFields/longtext/commontext.tsx @@ -29,8 +29,8 @@ export default class TextComponent extends PureComponent { } componentDidUpdate (prevProps: Props, prevState: State) { if (prevProps.value != this.props.value && prevState.wait === false) { - this.ref.input.selectionStart = this.selectionStart - this.ref.input.selectionEnd = this.selectionEnd + this.ref.resizableTextArea.textArea.selectionStart = this.selectionStart + this.ref.resizableTextArea.textArea.selectionEnd = this.selectionEnd } } handleComposition = (e: any) => { -- Gitee