react中Input组件的封装

原创已于 2022-06-16 09:22:51 修改 · 2.4k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react.js #javascript #前端

于 2022-06-14 15:55:34 首次发布

造轮子同时被 2 个专栏收录

5 篇文章

订阅专栏

封装组件

2 篇文章

订阅专栏

本文通过一个React Input组件的封装实例，展示了如何在组件间传递数据和处理变更。在Demo组件中，利用state管理和onChange回调实现了输入框的值与按钮点击后的数据显示。这种做法在React应用中常见，便于代码复用和状态管理。

说明

只是简单的写个栗子，别的例如checkBox,Button这些原生的工具的封装都可以按照这个思路来写。

封装组件

import React from "react";

export default function Input(props) {
  const changeHandle = (e) => {
    const {onChange} = props;
    let value = e.target.value;
    onChange && onChange(value); 
    console.log(onChange,value,'input组件');
  };

  return <input onChange={changeHandle} />;
}

demo组件

import React, { useState } from "react";
import Input from "./Input";
import { Button ,WhiteSpace} from "antd-mobile";

export default ()=> {
  const [formData, setFormData] = useState({});

  const changeHandle = (field) => {
    return (value) => {
      formData[field] = value;
      setFormData(Object.assign({}, formData));
    };
  };

  const show=()=>{
      console.log('formData值为',formData);
  }
  return (
    <div>
      <h1>使用组件</h1>
      <Input onChange={changeHandle("input1")} />
      <WhiteSpace/>
      <br />
      <Input onChange={changeHandle("input2")} />
      <WhiteSpace/>
      <br />
      <Button onClick={show()}>点击了</Button>
    </div>
  );
}

在这里插入图片描述

原因分析：

提示：input组件在接收到的onchange是demo组件中返回的
(value) => {
formData[field] = value;
setFormData(Object.assign({}, formData));
};
在input组件接收到这个函数后，把输入值传进了这个函数。
在demo组件中onchange函数接收的字段名进行了缓存传递。