React 组件之间的传值

周大胖子

1. import React, { Fragment, Component } from 'react';
   
2. 
   
3. class ToDoItem extends Component
   
4. {
   
5. 
   
6.     // 父子组件传值
   
7.     // 组件之间的传值靠 属性
   
8.     // 第一步 在 父组件【其实不是负的也对啊】 <Myapp  mydata={dsss} /> 上绑定 属性
   
9.     // 第二步 在 组件内部 使用 this.props.mydata 来接受 传递过来的值 与 方法
   
10. 
    
11.     // 里面的this 指向问题
    
12.     // 先说一个简写  在 constructor 中 把 函数指定了 this 则 下面不用指定
    
13.     // 再说一个 父级this 的绑定问题 ； 因为方法是用 属性传过来的 .直接在父级页面 bind(this) 即可把 子页面接收到的方法 指向调整为this
    
14. 
    
15.     constructor(props)
    
16.     {
    
17.         super(props);
    
18.         this.delFunction = this.delFunction.bind(this); // 和在行间写一样
    
19.     }
    
20. 
    
21.     render(){
    
22.         return (
    
23.             <Fragment>
    
24.                 <li onClick={this.delFunction} >
    
25.                     {this.props.content }  
    
26.                 </li>
    
27.               
    
28.             </Fragment>
    
29.         );
    
30.     }
    
31. 
    
32. 
    
33.    
    
34.     delFunction()
    
35.     {
    
36.         // alert(this.props.index )
    
37.         // 花样传值
    
38.         this.props.delF( this.props.index )
    
39.     }
    
40. 
    
41. }
    
42. 
    
43. export default ToDoItem;

复制代码

贴另一个页面的部分代码

1. render() {
   
2. 
   
3. 
   
4.     return (
   
5.       <Fragment>
   
6. 
   
7.         <div className="Mytest">
   
8.           <input
   
9.             value={this.state.inputValue}
   
10.             onChange={this.hand.bind(this)}
    
11.             onKeyDown ={this.handleKey.bind(this)}
    
12.             // 这里的 bind(this) 表示在该函数中重新制定该this对象 为 类本身
    
13.             type="text" />
    
14.           <button  onClick={this.handleBtnClick.bind(this) }   >提交</button>
    
15.         </div>
    
16.         <ul>
    
17.           {
    
18.             this.state.list.map((item, index) => {
    
19.               // 如果此处不加 key 值 控制台会给警告： 列表中每个内容都得有个独特的key
    
20.               // 这里这个 bind 里，绑定this  还可以传递一个索引值 index
    
21.               return (
    
22.                 <Fragment>
    
23.                   {/*
    
24.                     <li key = {index} onClick={this.handleLiClick.bind(this,index)}>
    
25.                     {item}
    
26.                   </li>
    
27.                   */}
    
28.                   <ToDoItem
    
29.                     content={item}
    
30.                     index={index}
    
31.                     delF ={this.handleLiClick.bind(this)}
    
32.                   />
    
33.                 </Fragment>
    
34.               );
    
35.             })
    
36.           }
    
37. 
    
38.         </ul>
    
39.       </Fragment>
    
40. 
    
41.     );
    
42.   }
    

复制代码