你长得那么好看点个赞吧！
没看明白的欢迎提问喔！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>05_components_composing</title>
</head>
<body>
<div id="example"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
class App extends React.Component{
constructor(props){
super(props)
this.state={
todos:['吃法','睡觉','洗衣服']
}
this.addtodo=this.addtodo.bind(this)
}
addtodo(arg){
const {todos}=this.state
todos.push(arg)
this.setState({todos})
}
render(){
var {todos}=this.state
return(
<div>
<h2>Simple ToDo List</h2>
<Add count={todos.length} addtodo={this.addtodo}/>
<List todos={todos}/>
</div>
)
}
}
class Add extends React.Component{
constructor(props){
super(props)
this.add=this.add.bind(this)
}
add(){
const todo=this.Inputdo.value.trim()
if(!todo){
return
}
this.props.addtodo(todo)
this.Inputdo.value=''
}
render(){
return(
<div>
<input type="text" ref={input=>this.Inputdo=input} />
<button onClick={this.add}>add#{this.props.count+1}</button>
</div>
)
}
}
Add.protoTypes={
count:PropTypes.number.isRequired,
addtodo:PropTypes.func.isRequired
}
class List extends React.Component{
render(){
return(
<div>
<ul>
{this.props.todos.map((elem,item)=>(
<li key={item}>{elem}</li>
))}
</ul>
</div>
)
}
}
List.propTypes={
todos:PropTypes.array.isRequired
}
ReactDOM.render(<App/>,document.getElementById('example'))
</script>
</body>
</html>
482
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
