Javascript 使用钩子提交页面信息

我有一个带有独立组件的react应用程序。下面是该代码的一个片段

const form = (props) => {
  <Paper className={classes.root}>
    <TextInput name="TextOne" minimum="0" maximum="100" value="50" />
  </Paper>

  <Paper className={classes.root}>
    <Slider name="slider_one" minimum="0" maximum="50" val="10"/>
  <Paper/>
  <SubmitButton/>
};
export default Form

}

const form=（道具）=>{
};
导出默认表单
}

每个组件都在其自己的文件中定义。当前页面呈现正确，但我需要一个按钮将所有数据推送到使用Django创建的外部API。我已经确认，在操作滑块和文本输入时，道具会正确更新

现在按钮渲染，但不执行任何操作

---

这个react应用程序是使用钩子创建的，但是大多数在线资源都使用类组件，所以很难理解。还有很多组件，但是在这里添加它们是多余的。

您应该按状态处理值并将它们发送到API

import React, { useState } from 'react'

const form = (props) => {
  const [textOne, updateTextOne] = useState(50)
  const [slider_one, updateSlider_one] = useState(10)
  const submit = ()=>{
    APICall({textOne, slider_one})
  }
  return(
    <Paper className={classes.root}>
      <TextInput onChange={e =>{updateTextOne(e.target.val)}} name="TextOne" minimum="0" maximum="100" value={textOne} />
    </Paper>

    <Paper className={classes.root}>
      <Slider onChange={e =>{updateTextOne(e.target.val)}} name="slider_one" minimum="0" maximum="50" val={slider_one} />
    <Paper/>
      <SubmitButton onSubmit={ submit } /> // or pass values down to button in order to send it to server values={{slider_one, textOne}}
    </Paper>
  )
}
export default Form

import React，{useState}来自“React”
常量形式=（道具）=>{
const[textOne，updateTextOne]=useState（50）
常量[slider\u one，updateSlider\u one]=useState（10）
常量提交=（）=>{
APICall（{textOne，slider_one}）
}
返回(
{updateTextOne（e.target.val）}name=“TextOne”minimum=“0”max=“100”value={TextOne}/>
{updateTextOne（e.target.val）}name=“slider\u one”minimum=“0”maximum=“50”val={slider\u one}/>
//或者将值向下传递到按钮，以便将其发送到服务器值={{slider_one，textOne}
)
}
导出默认表单

谢谢。我将在哪里声明API的URL。此外，这些组件中有许多是可重用的。这会使事情变得复杂吗？这取决于如果您使用fetch或js框架，您如何处理API调用。