In the last section, we learned how to use props from the parent component to the child component. This exercise feels that the most important thing is to pass the value from the child component to the parent component in React, and use the child component to call the parent component function.
Click the button to add data
One point worth noting:
1. Unshift receives the length of the array, and changes the original array, just use it directly, no need to assign a= this kind of assignment
2. Click the Finish button to clear the input, here you can’t newTodo=”, it’s involved Deep cloning problem, I thought about it, because the input is controlled by value, not 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'))
The difference between props and state
Props can only be read, state can be changed
. The data in props is passed from outside the component, and state is the data initialized inside the component, private
Controlled component
Although react is a one-way data flow, we can control the component through state to achieve the display effect of two-way data. This is called a controlled component.
You can follow the input box to change the display.
Here I want the p label below the input box to display "please enter", which makes a logical mistake for a long time. . Low-level error, it may be a bit troublesome for me to write this, but let’s take a look at how people do it in the later study.
Note that the onChange here is triggered when the keyboard is pressed
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'))
Continue in the afternoon!