zoukankan      html  css  js  c++  java
  • react 表单

    受控组件:

    import React from 'react'; class CommentBox extends React.Component{ constructor(props){ super(props) this.state = { value: '' } this.handleChange = this.handleChange.bind(this) this.handleSubmit = this.handleSubmit.bind(this) } handleChange(event){ console.log(event.target.value) this.setState({ value: event.target.value }) } handleSubmit(event){ console.log(this.state.value) event.preventDefault(); //阻止默认事件 } render() { return( <form className="p-5" onSubmit={this.handleSubmit}> <div className="form-group"> <label>留言:</label> <input type="text" className="form-control" value={this.state.value} onChange={this.handleChange}> </input> </div> <button type="submit" className="btn btn-primary">提交</button> </form> ) } } export default CommentBox
    非受控组件:

    import React from 'react'; class CommentBox extends React.Component{ constructor(props){ super(props) this.submitHandle = this.submitHandle.bind(this) } submitHandle(event){ console.log(this.textInput.value); event.preventDefault(); } render() { return( <form className="p-5" onSubmit={this.submitHandle}> <div className="form-group"> <label>留言:</label> <input ref={ (textInput) => {this.textInput = textInput}} type="text" className="form-control" > </input> </div> <button type="submit" className="btn btn-primary">提交</button> </form> ) } } export default CommentBox
  • 相关阅读:
    bootstrap table load属性
    Jquery中hide()、show()、remove()特性
    Jquery精准计算
    .nojekyll 文件是什么
    快来用 Nuxt 开发静态网站
    CI:持续集成
    把组件库发布到 npm
    JS的各种模块化规范
    打包发布:让组件库支持按需加载
    docz: 组件库文档 so easy!
  • 原文地址:https://www.cnblogs.com/150536FBB/p/13905374.html
Copyright © 2011-2022 走看看