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