如何在模式中使用從 handleSubmit 函數返回的數據來顯示用戶輸入的內容？

Question

在底部，我列出了我希望從列出的表單中獲取此信息的位置，但我無法弄清楚如何在 HTML 中使用我的 handleSubmit 中記錄的內容。 handleSubmit 中的所有日志都正確返回。 有沒有比嘗試使用表單返回的事件更好的方法來顯示此信息？

 class NameForm extends React.Component {

    state = {
        isOpen: false
      };
    
    openModal = () => this.setState({ isOpen: true });
    closeModal = () => this.setState({ isOpen: false });
      
    handleSubmit = (event) => {
      event.preventDefault()
      console.log(event.target[0].value)
      console.log(event.target[1].value)
      console.log(event.target[2].value)
      console.log(event.target[3].value)
    }
    render() {
      return (

        <div className = "form-box">
        <h5 className = "form-step"> Enter you order below </h5>
        <br />
        <form onSubmit={this.handleSubmit}>

        <div className = "field1">

          <label>
            Crust : &nbsp;
            <input
              type="text"
              name="Crust"
              ref={node => (this.inputNode = node)}
            />
          </label>
          <br />
          <label>
            Flavor : &nbsp;
            <input
              type="text"
              name="Flavor"
              ref={node => (this.inputNode = node)}
            />
          </label>
          <br />
          <label>
            Size : &nbsp;
            <input
              type="text"
              name="Size"
              ref={node => (this.inputNode = node)}
            />
          </label>
          <br />
          <label>
            Table # : &nbsp;
            <input
              type="number"
              name="Table"
              ref={node => (this.inputNode = node)}
            />
          </label>
          <br />
          </div>

          <button type="submit" className="submitBtn" onClick={this.openModal}>Submit</button>

        <Modal
      show={this.state.isOpen} 
      onHide={this.closeModal}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          Thank you for ordering with us, here is what you got!
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <p id="order">
            I want the information about the users order here
        </p>
      </Modal.Body>

    </Modal>


        </form>
        </div>
      )
    }
  }

Answer 1

您應該按照此處的文檔中的描述控制輸入元素，因為這樣您將始終擁有狀態中可用的輸入值，並決定隨時顯示它。

這就是你的情況 --> https://codesandbox.io/s/zealous-dust-bdflk?file=/src/App.js