javascript - 如何使用reactjs中的提交按钮获取输入并在html中显示

Question

我试图获取 onChange 输入的值，但我真的很困惑。 (该函数应接受用户输入并以 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>

Answer 1

这是一种方法。您可以跟踪按钮是否在状态下被单击，以及何时显示输出:

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>