zoukankan      html  css  js  c++  java
  • React(6) --双向数据绑定及列表数据循环

    React双向数据绑定:model改变影响view,view改变反过来影响model

    import React,{Component} from 'react';
    
    class Todolist extends Component {
        constructor(props) {
            super(props);
            this.state = { 
                username:"111"
            };
        }
        inputChange=(e)=>{
            this.setState({
                username:e.target.value
            })
    
        }
        setUsername=()=>{
            this.setState({
                username:'李四'
            })
    
        }
        render() {
            return (
                <div>
                    <h2>双休数据绑定</h2><input  value={this.state.username} onChange={this.inputChange}/> 
                    <p> {this.state.username}</p>
                    <button onClick={this.setUsername}>改变username的值</button>
                </div>
            );
        }
    }
    
    export default Todolist;

    使用 map 渲染列表数据

    JSX 的表达式插入 {} 里面可以放任何数据

    用户数据的 JSX 结构抽离成一个组件 User ,并且通过 props 把 user 数据作为组件的配置参数传进去;这样改写 Index 就非常清晰了,看一眼就知道负责渲染 users 列表,而用的组件是 User

    const users = [
      { username: 'Jerry', age: 21, gender: 'male' },
      { username: 'Tomy', age: 22, gender: 'male' },
      { username: 'Lily', age: 19, gender: 'female' },
      { username: 'Lucy', age: 20, gender: 'female' }
    ]
    
    class User extends Component {
      render () {
        const { user } = this.props
        return (
          <div>
            <div>姓名:{user.username}</div>
            <div>年龄:{user.age}</div>
            <div>性别:{user.gender}</div>
            <hr />
          </div>
        )
      }
    }
    
    class Index extends Component {
      render () {
        return (
          <div>
           {users.map((user, i) => <User key={i} user={user} />)}</div>
        )
      }
    }
    
    ReactDOM.render(
      <Index />,
      document.getElementById('root')
    )
  • 相关阅读:
    cocos2d-x CSV文件读取 (Excel生成csv文件)
    cocos2d-x 中 xml 文件读取
    String 类的实现
    json 文件解析与应用
    设计模式 之 《简单工厂模式》
    C++ 0X 新特性实例(比较常用的) (转)
    CCSpriteBatchNode CCSpriteFrameCache
    LongAdder
    ConcurrentHashMap源码
    HashMap源码
  • 原文地址:https://www.cnblogs.com/juewuzhe/p/10801772.html
Copyright © 2011-2022 走看看