编写react组件最佳实践

e.preventDefault()

this.props.model.save()

}

handleNameChange = (e) => {

this.props.model.name = e.target.value

}

handleExpand = (e) => {

e.preventDefault()

this.setState(prevState => ({ expanded: !prevState.expanded }))

}

render() {

// Destructure props for readability

const {

model,

title

} = this.props

return (

<ExpandableForm

onSubmit={this.handleSubmit}

expanded={this.state.expanded}

onExpand={this.handleExpand}>

// Newline props if there are more than two

<div>

<h1>{title}</h1>

<input

type="text"

value=http://developer.51cto.com/art/201705/{model.name}

// onChange={(e) => { model.name = e.target.value }}

// Avoid creating new closures in the render method- use methods like below

onChange={this.handleNameChange}

placeholder="Your Name"/>

</div>

</ExpandableForm>

)

}

这些组件没有state和办法。它们是纯净的，异常轻易定位问题，可以尽可能多的应用这些组件。

propTypes

import React from 'react' 
import { observer } from 'mobx-react' 
import { func, bool } from 'prop-types' 
 
import './styles/Form.css'	
			 6/9   首页 上一页 4 5 6 7 8 9 下一页 尾页	
			

　　推荐阅读
　　Java反射机制应用实践
            
            引言反射基本p.s: 本文须要读者对反射机制的API有必定程度的懂得，如不雅之前没有接触过的话，建议先看一下官方文档的Quick Start。在应用反射机制之前，起首我们先来看一下若何获取一个对>>>详细阅读


本文标题：编写react组件最佳实践
地址：http://www.17bianji.com/lsqh/35286.html
 1/2    1