Как форма работает в ReactJs?

Question

Может кто-нибудь сказать мне, как формы работают в ReactJS?

Когда пользователь нажимает кнопку «Отправить», как данные отображаются в форме, которую я вижу из реагирующей документации.

например, очень простым способом, как я отображаю данные, когда нажимаю кнопку отправки, проверяю пример. Отображаем данные в нижней части формы, когда вводим любой текст, затем нажимаем кнопку отправки, затем показываем мне вводимый текст ниже формы, как я могу сделать это?

import React,{Component} from 'react'
class FormHandling extends Component{
    constructor(props){
        super(props)
        this.state={text:''}
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }
    handleChange(e){
        this.setState({
            text:e.target.value
        })
    }
    handleSubmit(e){
        e.preventDefault()
        // what i can write ther 
    }
    render(){
        return(
            <div>
                <form onSubmit={this.handleSubmit} >
                    <input type="text" onChange={this.handleChange} value={this.state.text} placeholder="enter name"  />
                    <input type="submit" value="Submit"   />
                </form>
            </div>
        )
    }

}

export default FormHandling

Answer 1

handleSubmit(e){
  e.preventDefault()
  // 1st -> send code to an api
  fetch('some_url', {
    headers: {   
     'Accept': 'application/json',
     'Content-Type': 'application/json'
    },
    method: "POST",
    body: JSON.stringify(this.state.text)
   })
  .then(function(res){ console.log(res) })
  .catch(function(res){ console.log(res) });
 }
}
// 2 -> flag

state = {
 text: '',
 flag: false
}
handleSubmit = e => {
 e.preventDefault();
 this.setState({flag: true});
}
...
return(
 <div>
   <Form onSubmit={this.handleSubmit}/>
   {flag && <OtherComp textFromForm={this.state.text} /> } 
   // or something like this. (if flag is true then render comp) 
   // I didn't proof this but this is the idea of what you'd do.
 </div>
)