问题整理

1 请求数据失败后页面就一直报错，需强刷才能继续进行下去

解决方案： try catch

2 在中chrome中记住密码然后密码框会自动记住密码，解决方案

    已开始设置密码框的type="text" ，在得焦的时候，把其type改成password即可

3 文本域自动撑开

4 识别html 

    dangerouslySetInnerHTML

5 select call put 用法

    select 可以获取到 state 中文件的值  let param = yield select(state={return statecommonparam}) // common model的命名 

    call  const res = yield call('请求借口','参数')

    put   yield put({type:'reducers保存文件名称',payload:'参数'}) // 保存数据

            yield put({type:'当前文件下函数名称',payload:'参数'}) // 请求当前modal的函数

6 react 可拖拽d窗

import React from 'react';

import {Button, Icon} from 'antd';

import PropTypes from 'prop-types';

import styles from '/dragless';

import TrialModal from "/trialModal";

class DragModal extends ReactComponent {

  constructor(props) {

    super(props);

    const {visible} = thisprops;

    const {clientWidth, clientHeight} = documentdocumentElement;

    thisstate = {

      visible: (visible !== '' && visible !== null) visible : false,

      clientWidth,

      clientHeight,

      pageX: (clientWidth-1000) / 2,

      pageY: '10vh',

      moving: false,

    }

  }

  componentWillReceiveProps({visible}) {

    if (visible !== '' && visible !== null) {

      thissetState({visible});

    }

  }

  componentDidMount() {

    thisresize();

    windowaddEventListener('resize', thisresize);

  }

  resize = () => {

    const {clientWidth, clientHeight} = documentdocumentElement;

    // consolelog(`监听到窗口大小变化 宽：${clientWidth} 高：${clientHeight}`)

    const modal = documentgetElementById("modal");

    if (modal) {

      const pageY = (clientHeight - modaloffsetHeight) / 45;

      const pageX = (clientWidth - modaloffsetWidth) / 2;

      thissetState({ clientWidth,clientHeight, pageX, pageY})

    }

  }

  onCancel = () => {

    const {onCancel} = thisprops;

    if (onCancel) {

      onCancel();

    } else {

      thissetState({visible: false})

    }

  }

  open = () => {

    thissetState({visible: true});

  }

  // 获取鼠标点击title时的坐标、title的坐标以及两者的位移

  getPosition = (e) => {

    // 标题DOM元素titleDom

    const titleDom = etarget;

    // titleDom的坐标

    const X = titleDomgetBoundingClientRect()left;

    const Y = titleDomgetBoundingClientRect()top;

    // 鼠标点击的坐标

    let mouseX = 0, mouseY = 0;

    if (epageX || epageY) {  //ff,chrome等浏览器

      mouseX = epageX;

      mouseY = epageY;

    } else {

      mouseX = eclientX + documentbodyscrollLeft - documentbodyclientLeft;

      mouseY = eclientY + documentbodyscrollTop - documentbodyclientTop;

    }

    // 鼠标点击位置与modal的位移

    const diffX = mouseX - X;

    const diffY = mouseY - Y;

    return {X, Y, mouseX, mouseY, diffX, diffY}

  }

  /

  鼠标按下，设置modal状态为可移动，并注册鼠标移动事件

  计算鼠标按下时，指针所在位置与modal位置以及两者的差值

  /

  onMouseDown = (e) => {

    const position = thisgetPosition(e);

    windowonmousemove = thisonMouseMove;

    thissetState({moving: true, diffX: positiondiffX, diffY: positiondiffY});

  }

  // 松开鼠标，设置modal状态为不可移动,

  onMouseUp = (e) => {

    thissetState({moving: false});

  }

  // 鼠标移动重新设置modal的位置

  onMouseMove = (e) => {

    const {moving, diffX, diffY} = thisstate;

    if (moving) {

      // 获取鼠标位置数据

      const position = thisgetPosition(e);

      // 计算modal应该随鼠标移动到的坐标

      const x = positionmouseX - diffX;

      const y = positionmouseY - diffY;

      // 窗口大小

      const {clientWidth, clientHeight} = documentdocumentElement;

      const modal = documentgetElementById("modal");

      if (modal) {

        // 计算modal坐标的最大值

        const maxHeight = clientHeight - modaloffsetHeight;

        const maxWidth = clientWidth - modaloffsetWidth;

        // 判断得出modal的最终位置，不得超出浏览器可见窗口

        const left = x > 0 (x < maxWidth x : maxWidth) : 0;

        const top = y > 0 (y < maxHeight y : maxHeight) : 0;

        thissetState({pageX: left, pageY: top})

      }

    }

  }

  render() {

    const { width,visible, title,dataTrialResult,form,dataTrial,trialData} = thisprops;

    const { clientWidth, clientHeight, pageX, pageY} = thisstate;

    const modal = (

      <div className={stylescustom_modal_mask} style={{width: clientWidth, height: clientHeight}}>

        <div

          id="modal"

          className={stylescustom_modal_win}

          style={{

            width:1000,

            height: 500,

            marginLeft: pageX,

            marginTop: pageY,

          }}>

          <div

            className={stylescustom_modal_header}

            onMouseDown={thisonMouseDown}

            onMouseUp={thisonMouseUp}

          >

            {title title : null}

            <div className={stylescustom_modal_header_close} onClick={thispropshandleCancelTrial}>

              <Icon type="close"/>

            </div>

          </div>

          <div className={stylescustom_modal_content}>

            <TrialModal form={form}

                        trialData={trialData}

                        dataTrialResult={dataTrialResult}

                        dataTrial={dataTrial}

                        handleChangeTrial={thispropshandleChangeTrial}

                        handleChangeSelectTrual={thispropshandleChangeSelectTrual}

                        handleChangeDateTiral={thispropshandleChangeDateTiral}

                        handleClickTrialBtn={thispropshandleClickTrialBtn}></TrialModal>

          </div>

          {/<div className={stylescustom_modal_footer}>

            <div className={stylescustom_modal_footer_inner}>

              <Button onClick={thisonCancel}>

                {cancelText cancelText : '取消'}

              </Button>

              <Button type="primary" onClick={onOk} style={{marginLeft: '10px'}}>

                {okText okText : '确定'}

              </Button>

            </div>

          </div>/}

        </div>

      </div>

    )

    return <div>{!visible null : modal}</div>

  }

}

DragModalpropTypes = {

  visible: PropTypesbool,

  title: PropTypesstring,

  width: PropTypesany,

  height: PropTypesany,

  closable: PropTypesbool,

  okText: PropTypesstring,

  cancelText: PropTypesstring,

  onCancel: PropTypesfunc,

  onOk: PropTypesfunc,

  onOkLoading: PropTypesbool,

}

export default DragModal;

7 setFieldsValue使用

            myFormsetFieldsValue({

                  ['vc_centerno']: paramDataconvertMap[i]VC_CENTERNO,

                });

8  setFields 使用

        myFormsetFields({

                VC_WORKTIME: {

                  value: '',

                }

              });

通过dom对象的id进行判断

举例：

1

2

3

4

var a = documentgetElementById('dom对象的id');//通过getelementbyid方法获取dom节点

if(a){//如果a非null，则表示获取到了dom对象

//存在

}

补充：

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

1、利用js代码首先创建一个div，documentcreateElement('div');

2、确认div添加位置，可以在某个dom元素后面，或者通过css属性控制具体位置，主要通过left/top等属性控制。

3、确定位置之后，显示div即可。

示例：比如html中有一个文本输入框，我们现在需要在挨着输入框右下角位置显示一个div。

<input type="text" id="city" value="beijing"/>

方法：

function createDiv(){

//首先创建div

var descDiv = documentcreateElement('div');

documentbodyappendChild(descDiv);

//获取输入框dom元素

var text = documentgetElementById('city');

//计算div的确切位置

var seatX = textoffsetLeft + textoffsetWidth;//横坐标

var seatY = textoffsetTop + textoffsetHeight;//纵坐标

//给div设置样式，比如大小、位置

var cssStr = "z-index:5;width:420px;height:300px;background-color:#FFFF99;border:1px solid black;position:absolute;left:"

+ seatX + 'px;top:' + seatY + 'px;';

//将样式添加到div上，显示div

descDivstylecssText = cssStr;

descDivinnerHTML = '这是一个测试的div显示的内容';

descDivid = 'descDiv';

descDivstyledisplay = 'block';

}

在以往的工作当中，通常会遇到需要处理 DOM 的时候， DOM *** 作属于一个常规的范畴，我们可能需要通过它绑定一个事件、调整滚动条的位置、管理焦点、文本选择、媒体播放等等。

基于工程页面、逻辑复杂性、复用性等等因素可以选择合适的方案方便我们 *** 作 DOM 。

在页面比较简单和逻辑并不复杂的时候，我们可以根据实际情况选择比较简单的选择器方案；当工程逻辑较复杂的时候，我们要考虑组件的复用性、多人协作的不可控性等多种因素，选择方案的时候往往要考虑更多可能的场景。

如上所述，如果我们的使用场景单一，不需要复用的话，我们可以保证获取的 DOM 一致性的时候，可以考虑使用选择器获取 DOM 。

可以使用 documentgetElementXX 开头的方法：

可使用方法如下：

实际使用场景：

页面逻辑复杂的时候会有复用性的问题，如果使用 id 或者选择器就容易引发问题，这时我们可以选择使用 ref 。

ref 可以获取到相应的 DOM 节点，而且也可以得到详细信息，它得到的一个对象，包括 props，state 等。

React 会在组件挂载时给 current 属性传入 DOM 元素，并在组件卸载时传入 null 值。 ref 会在 componentDidMount 或 componentDidUpdate 生命周期钩子触发前更新。

ref 的值根据节点的类型而有所不同：

React 也支持另一种设置 refs 的方式，称为“回调 refs”。

不同于传递 createRef() 创建的 ref 属性，你会传递一个函数。这个函数中接受 React 组件实例或 HTML DOM 元素作为参数，以使它们能在其他地方被存储和访问。

React 将在组件挂载时，会调用 ref 回调函数并传入 DOM 元素，当卸载时调用它并传入 null。在 componentDidMount 或 componentDidUpdate 触发前，React 会保证 refs 一定是最新的。

父组件想要 *** 作子组件且没有控制权的时候可以选择使用 findDOMNode 。

findDOMNode 只在已挂载的组件上可用（即：已经存在 DOM 中的组件）。如果尝试调用未挂载的组件将会引发异常。

findDOMNode 不能用于函数组件。

如果组件已经被挂载到 DOM 上，此方法会返回浏览器中相应的原生 DOM 元素。此方法对于从 DOM 中读取值很有用，例如获取表单字段的值或者执行 DOM 检测。

当组件渲染的内容为 null 或 false 时，findDOMNode 也会返回 null。当组件渲染的是字符串时，findDOMNode 返回的是字符串对应的 DOM 节点。从 React 16 开始，组件可能会返回有多个子节点的 fragment，在这种情况下，findDOMNode 会返回第一个非空子节点对应的 DOM 节点。

大家好，我是IT修真院北京分院第22期的学员杨纲，一枚正直纯洁善良的WEB前端程序员。

1背景介绍

什么是DOM DOM 是 Document Object Model（文档对象模型）的缩写。 DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。 在 HTML DOM中，所有事物都是节点。DOM 是被视为节点树的 HTML。

2知识剖析

1什么是DOM节点 HTML 文档中的所有内容都是节点 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点。 >

先给你看下面两段代码：

<div id="div1">test!</div>

<script>

   consolelog(documentgetElementById("div1"));  //这个能够获得值

</script><script>

   consolelog(documentgetElementById("div1"));  //这个不能获得值！

</script>

<div id="div1">test!</div>

看出原因没有？当js代码是先于html运行时，是获取不到DOM元素的！因为这时候该DOM元素尚未加载到内存，相当于不存在！

要想实现js代码放到任何位置都能获得DOM元素，就要保证代码在页面完全加载完毕后才开始运行，比如：

<script>

   windowonload=function(){  //网页完全加载完毕才会触发这个事件

      consolelog(documentgetElementById("div1")); //这时候就能获得了

   }

</script>

<div id="div1">test!</div>

js *** 作节点的DOM方法

一、创建节点

createElement

createTextNode

二、添加、删除、替换、克隆元素

1、appendChild

2、insertBefore

3、如果appendChild、insertBefore追加的是已经存在的子元素，实际上就会将子元素位置移动

4、删除节点remove removeChild

remove()

removeChild

5替换节点

replaceChild

6、克隆节点

cloneNode()

三、 *** 作元素属性的方法

1获取属性 元素属性名

2设置属性 元素属性名 = 属性值

1、2方法只能获取和设置元素自带的属性

3 *** 作属性的万能方法

getAttribute()

setAttribute()

1、首先在html页面上，看到有一个按钮，要获得这个按钮离顶部的距离。

2、在按钮的事件函数里，先取这个按钮的offset数据，通过jquery的offset方法。

3、得到的结果是一个数组对象，只要获取里面的top数据就行了。

4、使用log方法，把数据输出到浏览器的控制台。

5、运行页面，看到现在的按钮位置。距离顶部估计是500px左右吧，点击一下这个按钮。

6、然后看一下控制台上的数据，得到距离为439的像素。

以上就是关于问题整理全部的内容，包括:问题整理、如何判断event发生的位置是否为dom元素、如何把一个元素放在屏幕中心位置用js源代码写等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！