使用 Hooks 提交页面信息

Question

我有一个带有单个组件的 react-app。这是该代码的 sn-p。

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

}

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

现在按钮呈现，但什么也不做。

这个 React 应用是使用钩子创建的，但是大多数在线资源都使用类组件，因此很难理解。还有更多组件，但在此处添加它们将是多余的。

Answer 1

您应该按状态处理值并将它们发送到 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