このセクションでは、チェック ボックスをクリックしてタスク アイテムのリアルタイム ステータスを変更しますが、Item コンポーネントと App コンポーネントには祖先と孫の関係があります。親子関係ではない場合でも、props を使用して通信できますか?答えは「はい」です。
Appコンポーネントで更新関数を定義し、Itemコンポーネントに渡します。
- 1. ステータスデータを更新する関数を定義する
// 更新状态数据
updateTodo = () => {
const {
todos } = this.state
console.log(todos)
}
- 2. まずそれを List コンポーネントに渡します
render() {
const {
todos,updateTodo} = this.props
return (
<ul className="todo-main">
{
todos.map(todo=>{
return <Item key={
todo.id} {
...todo} updateTodo={
updateTodo}/>
})
}
</ul>
)
}
- 3. Item コンポーネントで onChange イベントのコールバックを定義します。
import React, {
Component } from 'react'
import "./index.css"
export default class Item extends Component {
// 初始化状态数据
state = {
mouseIn:false}
// 鼠标移入移出回调函数
mouseHandle = (flag) => {
this.setState({
mouseIn:flag})
}
// 更新任务项状态
checkHandle = (id,event) => {
this.props.updateTodo(id,event.target.checked)
}
render() {
const {
id,name,done} = this.props
const {
mouseIn} = this.state
return (
<li onMouseEnter={
()=>this.mouseHandle(true)} onMouseLeave={
()=>this.mouseHandle(false)} style={
{
backgroundColor: mouseIn?'gainsboro':''}}>
<label>
<input type="checkbox" defaultChecked={
done} onChange={
event=>this.checkHandle(id,event)}/>
<span>{
name}</span>
</label>
<button className="btn btn-danger" style={
{
display:mouseIn?"block":"none"}}>删除</button>
</li>
)
}
}
onChange コールバック関数をチェック ボックスcheckHandle(id,event)にバインドし、id と event をパラメータとして渡しました。チェックボックスをクリックすると、 updateTodo 関数にパラメータが渡され、 App コンポーネントの状態データが変更されます。
- 4. updateTodo 関数を変換する
// 更新状态数据
updateTodo = (id,done) => {
const {
todos } = this.state
const newTodos = todos.map(todoObj=>{
if (id === todoObj.id) return {
...todoObj,done}
return todoObj
})
this.setState({
todos:newTodos})
}
ここでは、id 値がリスト内の id 値と一致する場合、 のステータスを更新すると判断します。 =3> value 、それ以外の場合は変更は行われず、そのまま返されます。 done
- 5. 具体的な効果
図から、リストのチェックボックスをクリックしてタスク アイテムのステータスを変更すると、react開発者ツールでstate値もリアルタイムで変化しますが、この時点でデータのリアルタイム更新が完了したことになります。
まとめ
- チェックボックスのステータス値を取得するには、次を使用します。
event.target.checked - 祖先コンポーネントと孫コンポーネント間の通信は、props を使用して受け渡すこともできます。