react中事件和受控组件

最新推荐文章于 2024-09-30 22:38:46 发布

不想写，还得写，写就写，慢慢写

最新推荐文章于 2024-09-30 22:38:46 发布

阅读量141

点赞数

文章标签： react.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_74331185/article/details/129537078

版权

事件传参

事件的执行参数e

事件基础复习

事件的绑定方法：

{/* 事件基本绑定方案---事件绑定的函数不能直接添加函数括号 */}
          {/* react 事件小驼峰规则
           事件属性={事件执行方法}
           在class类组件中需要使用this对象来调用方法
          */}
          <button onClick={this.handler}>按钮</button>
          {/* 事件函数直接在事件属性上添加 */}
          <button
            onClick={function () {
              console.log("测试", this);
            }}
          >
            按钮
          </button>
          {/*  将以上两种合成一个 */}
          <button
            onClick={() => {
              console.log(this);
              //执行类的原型方法---普通方法调用执行
              this.handler();
            }}
          >
            按钮
          </button>

事件this修改方法：

constructor(props) {
    super(props);
    this.state = {};
    // 修改事件函数this指向
    this.handler = this.handler.bind(this);
  }
  // 申明箭头函数 上下文一致
  handler = () => {
    console.log("测试", this);
  };


  <button onClick={this.handler.bind(this)}>按钮</button>

事件形参event

事件处理函数默认形参event

常用属性：

 //方法
  handler(e) {
    //点击事件获取当前目标对象---类似dom节点操作
    console.log(e.target);
  }
  render() {
    return (
      <>
        <div>
          <button onClick={this.handler.bind(this)}>按钮</button>
        </div>
      </>
    );
  }

处理事件默认行为：

preventDefault()  处理事件默认行为

基本用法
//表单提交方法
  subInfo(e) {
    console.log("测试");
    //阻止表单默认行为
    e.preventDefault();
  }
  render() {
    return (
      <>
        <div>
          <button onClick={this.handler.bind(this)}>按钮</button>
          {/* 表单元素 */}
          <form onSubmit={this.subInfo.bind(this)}>
            <ul>
              <li>
                姓名:<input type="text"></input>
              </li>
              <li>
                {/* <button onClick={this.subInfo.bind(this)}>提交</button> */}
                <button>提交</button>
              </li>
            </ul>
          </form>
        </div>
      </>

事件冒泡处理：

冒泡机制：
事件由里向外传递触发（点击事件）

 {/* 冒泡 */}
          <div
            onClick={this.maoFun.bind(this)}
            style={{ width: 100, height: 100, border: "1px solid red" }}
          >
            <button onClick={this.maoFun.bind(this)}>按钮</button>
          </div>

 //冒泡绑相同函数
  maoFun(e) {
    console.log(e.target); //触发对象
    console.log(e.currentTarget);//当前事件对象
  }

阻止冒泡

 //冒泡绑相同函数
  maoFun(e) {
    //阻止事件冒泡
    e.stopPropagation();
    console.log(e.currentTarget);
  }

事件捕获

             {/* 事件捕获  onClickCapture*/}
          <div
            onClickCapture={this.buFun.bind(this)}
            style={{ width: 100, height: 100, border: "1px solid red" }}
          >
            <button onClickCapture={this.buFun.bind(this)}>按钮</button>
          </div>

        //由外向里执行

事件传递参数

事件函数执行，传递参数。

1.普通方式传递参数
 <button
     onClick={(e) => {
     //执行组件的方法
    //传递参数
    this.sendMsg(index);
    }}
    >
     按钮
   </button>
 2.利用闭包返回事件处理函数
 <button onClick={this.sendMsg(index)}>按钮</button>
  sendMsg(index) {
    return function () {
      console.log(index);
    };
  }
 3.利用bind传递数据
 <button onClick={this.sendinfo.bind(this,in //bind替换this传递参数   
  //事件函数传递参数 造成事件对象event后移
  sendinfo(index,e){
    console.log(index);
  }}>按钮</button>

受控组件

在 HTML 中，表单元素（如、和 `）之类的表单元素通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 [setState()`](https://react.docschina.org/docs/react-component.html#setstate)来更新。

被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

使用组件的state维护表单元素的状态  绑定value受控属性值。
浏览器自动报警告

constructor(props) {
    super(props);
    this.state = {
      name: "",
    };
  }
  //表单提交
  subInfo(e) {
    e.preventDefault();
    console.log(this.state);
  }
  //文本变化方法
  change(e) {
    //获取当前元素的值
    let { value } = e.target;
    //使用setState更新state状态值
    this.setState({
      name: value,
    });
  }
  render() {
    console.log("渲染");
    //获取state状态值
    let { name } = this.state;
    return (
      <div>
        {/* 受控组件   value  受控属性   defaultValue  非受控属性等价于原生value */}
        <form onSubmit={this.subInfo.bind(this)}>
          <ul>
            <li>
              <label htmlFor="name">姓名：</label>
              <input
                type="text"
                value={name}
                onChange={this.change.bind(this)}
              />
            </li>
            <li>
              <button>注册</button>
            </li>
          </ul>
        </form>
      </div>
    );
    //以上效果类似数据双向 
       // state维护状态  渲染到UI   UI变化触发change更新state  render  界面同步更新

假设表单内存在多个元素？

如果存在多个form表单元素，可以方法公用实现
 setData(key, value) {
    this.setState({ [key]: value });
  }
  //表单提交
  subInfo(e) {
    e.preventDefault();
    console.log(this.state);
  }
  //文本变化方法
  change(e) {
    //获取当前元素的值
    let { value, name } = e.target;
    console.log(value, name);
    //使用setState更新state状态值
    //使用字面量解析key
    // this.setState({
    //   [name]: value,
    // });
    this.setData(name, value);
  }
  render() {
    //获取state状态值
    let { name, age, sex } = this.state;
    return (
      <div>
        {/* 受控组件   value  受控属性   defaultValue  非受控属性等价于原生value */}
        <form onSubmit={this.subInfo.bind(this)}>
          <ul>
            <li>
              <label htmlFor="name">姓名：</label>
              <input
                type="text"
                value={name}
                name="name"
                onChange={this.change.bind(this)}
              />
            </li>
            <li>
              <label htmlFor="name">年龄：</label>
              <input
                type="text"
                value={age}
                name="age"
                onChange={this.change.bind(this)}
              />
            </li>
            <li>
              <label htmlFor="name">性别：</label>
              <input
                type="radio"
                checked={sex == 0}
                name="sex"
                value="0"
                onChange={this.change.bind(this)}
              />
              男
              <input
                type="radio"
                checked={sex == 1}
                name="sex"
                value="1"
                onChange={this.change.bind(this)}
              />
              女
            </li>
            <li>
              <button>注册</button>
            </li>
          </ul>
        </form>
      </div>

复选框受控操作方法：

                 {hlist.map((item, index) => {
                return (
                  <React.Fragment key={index}>
                    <input
                      type="checkbox"
                      checked={hobby.indexOf(item) == -1 ? false : true}
                      value={item}
                      name="hobby"
                      onChange={this.change.bind(this)}
                    />
                    {item}
                  </React.Fragment>
                );
              })}

         //公用change方法
         //文本变化方法
  change(e) {
    //获取当前元素的值
    let { value, name, type } = e.target;
    console.log(type, value, name);
    switch (type) {
      case "checkbox":
        //动态获取state原状态值
        let list = this.state[name];
        //集合中检索是否存在
        let index = list.indexOf(value);
        //存在则删除  不存在则添加
        index == -1 ? list.push(value) : list.splice(index, 1);
        value = list;
        break;
    }
    //使用setState更新state状态值
    //使用字面量解析key
    // this.setState({
    //   [name]: value,
    // });
    this.setData(name, value);
  }

非受控组件

推荐使用受控组件来处理表单数据。在一个受控组件中，表单数据是由 React 组件来管理的。另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理。

使用原生DOM节点操作表单数据  来完成表单的处理。
1.使用ref属性获取dom元素节点
//表单提交
 //表单提交
  subInfo(e) {
    e.preventDefault();
    let name = this.refs.name.value;
    let age = this.refs.age.value;
    console.log("表单值：", name, age);
  }
  render() {
    return (
      <>
        <form onSubmit={this.subInfo.bind(this)}>
          <ul>
            <li>
              <label htmlFor="name">姓名：</label>
              <input ref="name" type="text" />
            </li>
            <li>
              <label htmlFor="age">年龄：</label>
              <input ref="age" type="text" />
            </li>
            <li>
              <button>注册</button>
            </li>
          </ul>
        </form>
      </>
    );
  }

  refs被弃用。

以上方案可以使用存在警告

2.使用createRef来创建reactdom元素节点。
//创建dom元素对象---构造函数中创建
this.nameEle = React.createRef();
//关联元素
<input ref={this.nameEle} type="text" />
//直接使用获取值  current属性为dom元素
this.nameEle.current