Javascript 输入带有功能组件的JS

我使用一个自由职业者编写的reactJS代码（我是reactJS新手），我需要使输入功能正常

但是当我在互联网上看教程和解决方案时，你必须使用受控组件，它们总是用类而不是函数构建的

但是，项目中的所有组件都是使用功能构建的

---

是否有可能使输入正常工作？要将输出保存在console.log中，请参阅保留数据以便在其他页面上使用

请参阅我的输入组件：

import React from 'react'
// Import styles
import './style.scss'

const BaseTextInput = ({
  className = '',
  id = '',
  name = '',
  size = 'normal',
  type = 'text',
  value = '',
  placeholder = '',
  disabled = false,
  top = false,
  onChange,
  children,
  ...rest
}) => {
  return (
    <form>
    <div
      className={`text-input text-input__size-${size} ${top ? 'text-input__top' : ''} ${className}`}
      {...rest}
    >
      {children && <label>{children}</label>}
      <input
        className="text-input__input"
        id={id}
        name={name}
        type={type}
        value={value}
        placeholder={placeholder}
        disabled={disabled}
        onChange={onChange}
      />
    </div>
    </form>
  )
}

export default BaseTextInput

从“React”导入React
//导入样式
导入“./style.scss”
常量BaseTextInput=({
类名=“”，
id=“”，
名称=“”，
大小='正常'，
类型='text'，
值=“”，
占位符=“”，
禁用=错误，
top=false，
一旦改变，
儿童
休息
}) => {
返回(
{children&&{children}
)
}
导出默认BaseTextInput

谢谢，我希望我能把我的问题解释清楚

2010年2月26日编辑10h23：

---

谢谢大家，我明白我能做什么

我认为父组件的onChange方法是作为一个道具传递给这个功能组件的，如果您愿意，您可以为这个组件创建onChange方法

我使用您的示例组件为您创建一个CodeSandbox，但我不确定这是否是您想要的

从“/InputComponent”导入InputComponent；
从“react”导入{useState}；
导出默认函数App（）{
常量[inputData，setInputData]=useState（“”）；
常数handleChange=（e）=>{
常量值=e.target.value；
设置输入数据（值）；
};
返回(
您的输入组件


输入值：{inputData}
);
}

---

希望能帮助你

“是否有可能使输入正常工作？”是的，绝对有可能。看起来您有一个功能组件输入，但我怀疑您是否需要一个

表单

元素来包装它。问题是什么？顺便说一句，受控与非受控输入与作为基于类或功能组件无关。“项目中存在的所有组件都是使用函数构建的”好消息，基于类的组件仍然是兼容的和有效的，因此如果您更熟悉的话，您仍然可以使用它们。功能组件可以是受控组件。为此，您必须使用

useState（）

import InputComponent from "./inputComponent";
import { useState } from "react";

export default function App() {
  const [inputData, setInputData] = useState("");
  const handleChange = (e) => {
    const value = e.target.value;
    setInputData(value);
  };
  return (
    <div className="App">
      Your input component
      <InputComponent onChange={handleChange} value={inputData} />
      <br />
      Input value: <b>{inputData}</b>
    </div>
  );
}