上节学了父组件向子组件中传值用props,这次练习感觉最关键的还是在react中子组件向父组件传值,用子组件调用父组件函数的形式来实现。
点击按钮实现添加数据
值得注意的接个点:
1.unshift接收的是数组长度,改变了原数组,直接用就好了不需要a=这种去赋值
2.点击完按钮清空input,这里不能newTodo=‘’,涉及深克隆问题,想了下,因为控制input的是value,而不是newTodo
//定义组件
class App extends React.Component{
constructor(props){
super(props)
//初始化数据
this.state = {
todos: ['吃饭', '睡觉', '打豆豆']
}
this.add = this.add.bind(this)
}
add(newTodo){
console.log(newTodo)
//更新状态
let todos = this.state.todos
todos.unshift(newTodo)
this.setState({
todos
})
}
render(){
let {todos} = this.state
return(
<div>
<h2>Simple TODO List</h2>
<AddTodo add={this.add} todos={todos}/>
<TodoList todos={todos}/>
</div>
)
}
}
//定义AddTodo
class AddTodo extends React.Component{
constructor(props){
super(props)
this.addTodo = this.addTodo.bind(this)
}
addTodo(){
//收集数据
let newTodo = this.refs.newTodo.value
//判断是否输入合法
if(!newTodo.trim()){
alert('不能为空')
return
}
this.props.add(newTodo)
this.refs.newTodo.value = ''
}
render(){
return(
<div>
<input ref='newTodo' type="text"/>
<button onClick={this.addTodo}>Add{this.props.todos.length}</button>
</div>
)
}
}
//定义TodoList
class TodoList extends React.Component{
render(){
let {todos} = this.props
return(
<ul>
{
todos.map((item, index) => {
return <li key={index}>{item}</li>
})
}
</ul>
)
}
}
ReactDOM.render(<App/>, document.getElementById('example'))
props与state的区别
props只能去读,state可以改变
props中数据是组件外传来的,state是组件内部初始化的数据,私有的
受控组件
react虽然是一个单向数据流,但是我们可以通过state去控制组件,去达到双向数据的显示效果,这种叫受控组件
可以跟随输入框输入变化显示
这里我想让输入框没有值下面的p标签显示‘’请输入‘’,弄了半天逻辑错了。。低级错误,我写这样可能有点麻烦,但是看看后面学习中人家怎么做的吧
注意的是这里的onChange,在键盘按下的一刻就会触发
class TowWay extends React.Component{
constructor(props){
super(props)
this.state = {
msg: '',
show: true
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(event){
if(event.target.value.trim()){
this.setState({
msg: event.target.value,
show: false
})
}else{
this.setState({
msg: event.target.value,
show: true
})
}
console.log(event.target.value)
}
render(){
let {msg, show} = this.state
return(
<div>
<input onChange={this.handleChange} type="text" />
<p>{show? '请输入':msg}</p>
</div>
)
}
}
ReactDOM.render(<TowWay/>, document.getElementById('example'))
下午继续!