Question

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

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

使用挂钩提交页面信息

1 个答案: