react组件中获取节点的2种方式

责编:menVScode 2017-06-22 21:17 阅读(981)

        第一种获取DOM节点的方式:this.refs

        第二种获取DOM节点的方式:回调函数

class AppComponent extends React.Component {
  doClick(){
    console.log(this.refs.input1.value);
  }
  doClick2(){
    console.log(this.input.value);
  }
  render() {
    return (
      <div className="index">
        <img src={yeomanImage} alt="Yeoman Generator" />
        <div className="notice">Please edit <code>src/components/Main.js</code> to get started!</div>
      	
        <div>
          {/*第一种*/}
          <input ref='input1' type='text' />
          <button onClick={this.doClick.bind(this)}>按钮1</button>
          {/*第二种*/}
          <input ref={text=>this.input=text} type='text' />
          <button onClick={this.doClick2.bind(this)}>按钮2</button>
        </div>
      </div>
    );
  }
}
//设置默认属性
AppComponent.defaultProps = {
	text:'demo'
};
AppComponent.propTypes = {
  count:PropTypes.string.isRequired//isRequired:必须要填不能为空
}
标签: react reactjs
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码