Отправить информацию о странице с помощью хуков

Question

У меня есть приложение-реагирование с отдельными компонентами. Вот фрагмент этого кода.

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

}

с каждым компонентом, определенным в его собственном файле. В настоящее время страница отображается правильно, но мне нужна кнопка для вывода всех данных во внешний API, созданный с помощью Django. Я подтвердил правильность обновления реквизита при манипулировании ползунком и вводом текста.

Прямо сейчас кнопка рендерится, но ничего не делает.

Это приложение реагирования было создано с использованием хуков, но большинство ресурсов в Интернете используют компоненты класса, поэтому трудно следовать. Есть еще много компонентов, но добавление их здесь было бы излишним.

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