how to get input and display in html with submit button in reactjs

Question

I'm trying to get the value of input onChange and I got really confused. (the function should take user input and display in html)

export class App extends React.Component {
constructor (props) {
super(props)
this.state = {
  date: new Date(),
  inputText: ''
}
this.handleChange = this.handleChange.bind(this)
this.submitChange = this.submitChange.bind(this)
}
handleChange (event) {
 this.setState({
  [event.target.name]: event.target.value
})
}
submitChange (event) {
 event.preventDefault()
 this.setState({
  inputText: true
})
}
render () {
return (
<form onSubmit={this.submitChange}>
      <input type='text' className='text_appoint' name='inputText' value={this.state.inputText} onChange={this.handleChange} placeholder='Typeing ...' />
</form>
<button className='submit' onClick={this.submitChange} value='Submit'>
<div> </div>

Braca · Accepted Answer · 2019-01-15 14:30:20Z

Here's one way of doing that. You can track if the button has been clicked in state, and when it is show the output:

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      submitted: false,
      date: new Date(),
      inputText: ''
    }
    this.handleChange = this.handleChange.bind(this)
    this.submitChange = this.submitChange.bind(this)
  }
  handleChange(event) {
    this.setState({
      [event.target.name]: event.target.value
    })
  }
  submitChange(event) {
    event.preventDefault()
    this.setState({
      submitted: true,
      inputText: this.state.inputText,
    })
  }
  render() {
    return ( 
    <div >
      <form onSubmit = { this.submitChange } >
      <input type = 'text'
      className = 'text_appoint'
      name = 'inputText'
      value = {
        this.state.inputText
      }
      onChange = {
        this.handleChange
      }
      placeholder = 'Typeing ...' / >
      </form>
      <
      button className = 'submit'
      onClick = {
        this.submitChange
      }
      value = 'Submit' > Submit < /button> <
      p id = "submittedText" > {
        this.state.submitted ?
        this.state.inputText : ''
      } < /p> <
      p id = "submittedDate" > {
        this.state.submitted ?
        this.state.date.toLocaleTimeString() : ''
      } < /p>

      <
      /div>
    )
  }
}



ReactDOM.render( < App / > , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Collectives™ on Stack Overflow

how to get input and display in html with submit button in reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related