【ReactJs学习笔记】【事件Event && 得到浏览器显示的元素refs用于表单取值】

【Javascript学习笔记】

目录

---

onClick点击事件

---

onKeydown按下键盘事件

---

onCopy复制事件

---

onSubmit提交表单

尝试：CommentForm .js

...

class CommentForm extends Component {
    handleSubmit(event){
        event.preventDefault();//可去掉事件默认要做的事
        console.log("提交表单");
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>

...

---

得到浏览器上显示的元素refs，获取对应from的内容

代码

import React, { Component } from 'react';

class CommentForm extends Component {
    handleSubmit(event){
        event.preventDefault();//可去掉事件默认要做的事
        console.log("提交表单");

        let author = this.refs.author.value,
            text = this.refs.text.value;

        console.log(author+text);        //测试是否获取到对应值
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit.bind(this)}>
                <div className="field">
                    <input type="text" placeholder="姓名" ref="author" />
                </div>
                <div className="field">
                    <textarea placeholder="评论" ref="text" ></textarea>
                </div>
                <button type="submit">
                    添加评论
                </button>
            </form>
        );
    }
}

export default CommentForm;

效果

---

快捷链接

全部React学习笔记的目录 Click Here>>
全部Javascript学习笔记的目录 Click Here>>
Less学习笔记 Click Here>>
安利一波前端开发推荐使用的工具 Click Here>>
github各类实战练习源码下载 Click Here>>
如果你觉得我的东西能帮到你，无限欢迎给我的github库点个收藏Star~0v 0~

---