javascript - 如何在 React JS 中处理表单数据？

Question

考虑带有数字输入的 A 和 Radio Booleans 是或否。对于 Yes，我们添加 2 个输入，对于 NO，我们减去。我正在使用带有 Bootstrap 的 React JS。第一个组件是带有输入的表单。然后在单击提交按钮时调用另一个组件，表 (2*2) 给出答案和另一个文本输出。调用第二个组件意味着较早的组件被 document.write() 删除。例如，我使用了以下代码。

import React, {Component} from "react"
class AS extends Component {
  AS(props) {
    this.handleSubmit = this.handleSubmit.bind(this);
  }


  ASSubmit(event) {
    document.write(
      class ASSub extends Component {
        render(){
          return (
            <table className="table table-hover table-bordered table-striped">
              <thead><tr><td>Particulars</td><td>Amount Rs.</td></tr></thead>    
              <tbody><tr><td>Final Amount</td><td>{"Here first answer"}</td></tr>
              <tr><td>Suggestion: </td><td></td>"Another statement dependent on answer"</tr>
              <tr><td>Final Conclusion</td><td></td></tr>    
              </tbody>    
            </table>
          )
        }
      }
    );
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.ASSubmit}>
            <table className="table table-hover table-bordered table-striped">
                <thead><tr><td>Particulars</td><td>Inputs</td></tr></thead>
                <tbody><tr><td><label for="Amt_Lumpsum">Num1</label></td><td><input type="number" name="Amt_lumpsum" /></td></tr>
                        <tr><td><label for="Amt_Periodical>Monthly reciepts</label></td><td><input type="number" name="Amt_Periodical" /></td></tr>
                        <tr><td>Whether Amt paid or not</td><td><input type="radio" name="payment" value="Yes" /><label for="payment">Yes</label><input type="radio" name="payment"value="No" /><label for="payment">No</label></td></tr>
                        <tr><td></td><td>            
                            <button type="submit" class="btn btn-default">Submit</button>
                            <button type="Reset" class="btn btn-default">Reset</button>
                        </td></tr>
                </tbody>
            </table>
      </form>
      
    );
  }
}
export { AS }

这就是 UI 的外观。第一个：带有表单的导航栏第二个：带有结果表的导航栏（所以通过使用 write.document 我们不会擦除导航栏）

标签： javascriptreactjs