react中Input组件的封装

说 明

只是简单的写个栗子，别的例如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函数接收的字段名进行了缓存传递。