1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script src="../node_modules/react/umd/react.development.js"></script>
  9.     <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
  10.     <script src="../node_modules/babel-standalone/babel.js"></script>
  11. </head>
  12. <body>
  13.     <div id="app"></div>
  14.     <script type="text/babel">
  15.     class Txt extends React.Component{
  16.         constructor(props){
  17.             super(props);
  18.             this.Input = this.Input.bind(this);
  19.         }
  20.         Input(e){
  21.           if(e.keyCode===13){
  22.             this.props.addItem(e.target.value);
  23.             // e.target.value = '';
  24.             // this.refs.wbk.value = '';
  25.             this.jd.value = '';
  26.           }
  27.         }
  28.         render(){
  29.             console.log(this)
  30.             // 官方推荐 将文本框的值挂载到函数实例上储存起来 很react的做法
  31.             return (
  32.                 // <input type='text' onKeyUp={this.Input} ref='wbk'/>
  33.                 <input type='text' onKeyUp={this.Input} ref={(wb)=>this.jd=wb}/>
  34.             )
  35.         }
  36.     }
  37.     class List extends React.Component{
  38.         constructor(props){
  39.             super(props);
  40.         };
  41.         render(){
  42.             let {data:list} = this.props;
  43.             return(
  44.                 // 这里绑定的this没有作用，只是为了返回一个没有立即执行的方法
  45.                 <ul>
  46.                     {
  47.                         list.map((item,index)=>{
  48.                         return <li key={index} style={{background:index===1?'red':'skyblue'}}>
  49.                         {item}
  50.                         <button onClick={this.props.remove.bind(this,index)}>del</button>
  51.                         </li>
  52.                         })
  53.                     }
  54.                 </ul>
  55.             )
  56.         }
  57.     }
  58.     class App extends React.Component{
  59.         // 进行props的继承
  60.         constructor(props){
  61.             super(props);
  62.             // super继承根数据
  63.             this.state = {
  64.                 list:['aa','bb']
  65.             }
  66.             // 绑定了这些方法调用的this
  67.             this.addItem = this.addItem.bind(this);
  68.             this.del = this.del.bind(this);
  69.         };
  70.         addItem(str){
  71.             // 解构赋值 进行修改state状态
  72.             let list1 = [...this.state.list,str];
  73.             this.setState({
  74.                 list:list1
  75.             })
  76.         };
  77.         del(idx){
  78.             let list1 = [...this.state.list];
  79.             list1.splice(idx,1);
  80.             this.setState({
  81.                 list:list1
  82.             })
  83.         }
  84.         render(){
  85.             // 结构数据
  86.             let {list} = this.state;
  87.             return (
  88.                 // 进行传值和传方法
  89.                 <div>
  90.                     <Txt addItem={this.addItem}/>
  91.                     <List  data={list} remove={this.del}/>
  92.                 </div>
  93.             )
  94.         }
  95.     }
  96.         ReactDOM.render(
  97.             <App/>,
  98.             document.getElementById('app')
  99.         )
  100.     </script>
  101. </body>
  102. </html>

react组件传值传方法的更多相关文章

  1. vue 和 react 组件间通信方法对比

    vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...

  2. vue父组件为子组件传值传不过去？vue为数组传值，不能直接用等于的方式，要用循环加push的方式

    父组件为子组件传值不成功,子组件拿不到值,不能直接赋值,要用循环加push的方式赋值.

  3. react组件中的方法？

    SetState 设置状态 ReplaceState 替换状态 setProps设置属性 replacerProps替换属性 forceUpdate 强制更新 findDOMNode获取DOM节点 i ...

  4. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

  5. 规避 React 组件中的 bind(this)

    React 组件中处理 onClick 类似事件绑定的时候,是需要显式给处理器绑定上下文(context)的,这一度使代码变得冗余和难看. 请看如下的示例: class App extends Com ...

  6. React - 组件：函数组件

    目录: . 组件名字首字母一定是大写的 . 返回一个jsx . jsx依赖React,所以组件内部需要引入React . 组件传参 a. 传递. <Component list={ arrDat ...

  7. React组件绑定this的三种方法

    我们在使用React组件时,调用方法常常用到this和event对象,默认情况是不会绑定到组件上的,需要特殊处理. 节点上使用bind绑定 特点:该方法会在每次渲染组件时都会重新绑定一次,消耗一定的性 ...

  8. 我们一起来详细的了解react的语法以及组件的使用方法

    jsx的介绍 React 使用 JSX 来替代常规的 JavaScript. JSX 是一个看起来很像 XML 的 JavaScript 语法扩展. jsx的优点 JSX 执行更快,因为它在编译为 J ...

  9. react组件间的传值方法

    关于react的几个网站: http://react.css88.com/ 小书:http://huziketang.mangojuice.top/books/react/ http://www.re ...

随机推荐

  1. Java多线程（三）如何创建线程

    点我跳过黑哥的卑鄙广告行为,进入正文. Java多线程系列更新中~ 正式篇: Java多线程(一) 什么是线程 Java多线程(二)关于多线程的CPU密集型和IO密集型这件事 Java多线程(三)如何 ...

  2. 强大而灵活的字体图标替代库iconfont

       前言概述 在开发网页制作过程中通常需要一些网页小图标,前端需要PS切图,将单个小图标icon组合成CSS雪碧图过程中,需要一些时间和精力; 如果网页制作中需要的小图标icon有一套css框架库集 ...

  3. call和apply；this；闭包

    对于这两个原生JS的方法,一直有点绕不过来,朦朦胧胧的感觉.现在详细梳理一下: 两者是基于继承的思想, obj.call(thisObj, arg1, arg2, ...); obj.apply(th ...

  4. centos7下kubernetes（4.kubernetes组件）

    Kubenetes cluster 由master和node组成 Master是kubenetes的大脑.运行着以下进程:kube-apiserver.kube-scheduler.kube-cont ...

  5. [matlab] 15.罚函数降维

    求非线性规划 min f(x)= x(1)^2 + x(2)^2 + 8 s.t. { x(1)^2-x(2)>=0 , -x(1) - x(2)^2 +2 = 0, x(1)>=0 ,x ...

  6. Python：Day15 函数

    函数参数补充: 还可以这样传参: def f(*args): print(args) f(*[1,3,4,5]) #输出结果:(1, 3, 4, 5) 注意这是一个元组 def f2(**kwargs ...

  7. python3 列表/字典/集合推导式

    '''列表推导式[结果 fox循环 if语句]'''lst = ["Python周末%s期" % i for i in range(1, 27) if i%2 == 0]print ...

  8. input表单提交完毕，返回重新填入有黄色背景，和 历史记录 清除

    <input autocomplete="value"> // 添加这个属性,可以解决然后添加一个css input:-webkit-autofill {box-sha ...

  9. PHP中静态变量和函数引用返回

    这两天看看PHP写的框架CI,源代码中写了很多静态变量和函数引用. 官方文档地址:http://php.net/manual/zh/language.references.return.php 简单写 ...

  10. kafka+storm结合存在的一些问题与解决方法

    在配置kafka和storm的时候, 经常的会出现一些问题, 主要在以下几个: 1.  打jar包上去storm集群的时候会出现jar包冲突,类似于log4j或者sf4j的报错信息. 2. kafka ...