Reactjs 如何使用react创建可重用的输入字段？

我有一个InputField组件，它接受各种道具，如类型、占位符、值等。我正在尝试使用InputField组件创建一个表单。我可以很容易地从表单传递道具，但我无法将输入值保存到我的状态。 这是我的密码

InputField.js

import React，{useState}来自“React”；
常量输入字段=（{值、标签、占位符、类型、onChange}）=>{
常数handleChange=（e）=>{
const{value}=e.target；
onChange（值）；
};
返回(
{label&&{label}
);
};
导出默认输入字段；

AddProductForm.js

import React，{useState}来自“React”；
从“reactstrap”导入{Form，Button}；
从“./UI/InputField”导入InputField；
const AddProductForm=（）=>{
const[inputValue，setInputValue]=useState（{name:，price:}）；
const{name，price}=inputValue；
常量handleChange=（inputValue）=>{
setInputValue（{name:inputValue，price:inputValue}）；
console.log（输入值）；
};
返回(
添加{“”}
取消
);
};
导出默认的AddProductForm；

尝试从

输入字段

事件

传递，而不是从

值

传递。 然后在

处理程序中

可以获取

输入名称

，并了解应该更新哪个字段

当然，首先为

输入添加
名称
字段

，如下所示：

InputField.js

import React  from "react";

const InputField = ({ value, label, name, placeholder, type, onChange }) => (
  <div className="form-group">
    {label && <label htmlFor="input-field">{label}</label>}
    <input
      type={type}
      value={value}
      name={name}
      className="form-control"
      placeholder={placeholder}
      onChange={onChange}
    />
  </div>
);

export default InputField;

import React, { useState } from "react";
import InputField from "../UI/InputField";

const AddProductForm = () => {
  const [inputValue, setInputValue] = useState({ name: "", price: "" });
  const { name, price } = inputValue;

  const handleChange = (e) => {
    const { name, value } = e.target;
    setInputValue((prev) => ({
      ...prev,
      [name]: value,
    }));
    console.log(inputValue);
  };

  return (
     <Form>
       <InputField
         type="text"
         value={name}
         placeholder="Product Name"
         label="Name"
         name="name"
         onChange={handleChange}
       />
       <InputField
         type="number"
         value={price}
         placeholder="Add Price"
         label="Price"
         name="price"
         onChange={handleChange}
       />
       <Button color="primary">Add</Button>{" "}
       <Button color="secondary">Cancel</Button>
     </Form>
  );
};

export default AddProductForm;

从“React”导入React；
常量输入字段=（{值、标签、名称、占位符、类型、onChange}）=>(
{label&&{label}
);
导出默认输入字段；

AddProductForm.js

import React  from "react";

const InputField = ({ value, label, name, placeholder, type, onChange }) => (
  <div className="form-group">
    {label && <label htmlFor="input-field">{label}</label>}
    <input
      type={type}
      value={value}
      name={name}
      className="form-control"
      placeholder={placeholder}
      onChange={onChange}
    />
  </div>
);

export default InputField;

import React, { useState } from "react";
import InputField from "../UI/InputField";

const AddProductForm = () => {
  const [inputValue, setInputValue] = useState({ name: "", price: "" });
  const { name, price } = inputValue;

  const handleChange = (e) => {
    const { name, value } = e.target;
    setInputValue((prev) => ({
      ...prev,
      [name]: value,
    }));
    console.log(inputValue);
  };

  return (
     <Form>
       <InputField
         type="text"
         value={name}
         placeholder="Product Name"
         label="Name"
         name="name"
         onChange={handleChange}
       />
       <InputField
         type="number"
         value={price}
         placeholder="Add Price"
         label="Price"
         name="price"
         onChange={handleChange}
       />
       <Button color="primary">Add</Button>{" "}
       <Button color="secondary">Cancel</Button>
     </Form>
  );
};

export default AddProductForm;

import React，{useState}来自“React”；
从“./UI/InputField”导入InputField；
const AddProductForm=（）=>{
const[inputValue，setInputValue]=useState（{name:，price:}）；
const{name，price}=inputValue；
常数handleChange=（e）=>{
常量{name，value}=e.target；
setInputValue（（上一个）=>({
…上一页，
[名称]：值，
}));
console.log（输入值）；
};
返回(
添加{“”}
取消
);
};
导出默认的AddProductForm；