React 学习-9-数据,绑定+refs

  • 获取远程数据:

componentDidMount 方法中调用ajax或者axios来获取服务端数据 并进行处理存储在state中

  • 值绑定

 html对应的标签属性值 使用花括号将其包裹其中

示例一:
render() {
    var value = this.state.value;
    return <div>
            <input type="text" value={value} onChange={this.handleChange} /> 
            <h4>{value}</h4>
           </div>;
  }

示例二:
render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          选择您最喜欢的网站
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="gg">Google</option>
            <option value="rn">Runoob</option>
            <option value="tb">Taobao</option>
            <option value="fb">Facebook</option>
          </select>
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
  • ref:用来绑定到 render() 输出的任何组件上
<input ref="myInput" />

//获取方式
var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();

相关推荐

  1. React 学习-9-数据+refs

    2024-05-12 12:02:04       9 阅读
  2. vue数据

    2024-05-12 12:02:04       39 阅读
  3. WPF数据

    2024-05-12 12:02:04       13 阅读
  4. springmvc数据

    2024-05-12 12:02:04       7 阅读
  5. Vue 双向数据

    2024-05-12 12:02:04       18 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-05-12 12:02:04       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-05-12 12:02:04       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-05-12 12:02:04       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-05-12 12:02:04       18 阅读

热门阅读

  1. Vue11 Vue3完结撒花

    2024-05-12 12:02:04       8 阅读
  2. AIGC全面介绍:探索人工智能通用计算的未来

    2024-05-12 12:02:04       10 阅读
  3. 顺序表和链表

    2024-05-12 12:02:04       11 阅读
  4. 巩固学习5

    2024-05-12 12:02:04       9 阅读
  5. 写SQL的心得

    2024-05-12 12:02:04       7 阅读
  6. 相机3:曝光三要素之光圈与快门

    2024-05-12 12:02:04       7 阅读
  7. 一次基类类型对象无法被传递问题的分析

    2024-05-12 12:02:04       8 阅读
  8. 函数指针和指针函数的区别

    2024-05-12 12:02:04       12 阅读
  9. 机器学习中的数据集的收集方法和工具

    2024-05-12 12:02:04       10 阅读
  10. 【C语言】预处理器

    2024-05-12 12:02:04       12 阅读
  11. conda 常用的命令

    2024-05-12 12:02:04       9 阅读
  12. 为什么PHP 是一门弱类型语言?

    2024-05-12 12:02:04       8 阅读