3、react DOM操作

DOM操作

1、findDOMNode()

• 当组件加载到页面上之后（mounted），可以通过 react-dom 提供的 findDOMNode() 方法拿到组件对应的 DOM 元素。

findDOMNode() 不能用在无状态组件上。

import { findDOMNode } from 'react-dom';

2、Refs

• 另外一种方式就是通过在要引用的 DOM 元素上面设置一个 ref 属性指定一个名称，然后通过 this.refs.name 来访问对应的 DOM 元素。

因为无状态组件没有实例，所以 ref 不能设置在无状态组件上

class App extends Component {
  constructor() {
    return { userInput: '' };
  }

  handleChange(e) {
    this.setState({ userInput: e.target.value });
  }

  clearAndFocusInput() {
    this.setState({ userInput: '' }, () => {
      this.refs.theInput.focus();
    });
  }

  render() {
    return (
      <div>
        <div onClick={this.clearAndFocusInput.bind(this)}>
          Click to Focus and Reset
        </div>
        <input
          ref="theInput"
          value={this.state.userInput}
          onChange={this.handleChange.bind(this)}
        />
      </div>
    );
  }
}

3、总结

• 可以使用 ref 获取组件定义的任何公共方法，比如 this.refs.myTypeahead.reset()
• Refs 是访问到组件内部 DOM 节点唯一可靠的方法
• Refs 会自动销毁对子组件的引用（当子组件删除时）

4、注意事项

• 不要在 render 或者 render 之前访问 refs
• 不要滥用 refs