reactjs - 如何使用 React.js 从模态发布动态表单数据

问题描述

下面的代码通过 React.js 以模态显示 JSON 结果，并且运行良好。

现在我想以表单的形式在模态中发布每个结果，所以我在下面添加了以下代码：

handleNewChange(event) {
  
this.setState({
    [event.target.name]: event.target.value,
  })
}

  handleNewSubmit(event) {

// alert form data if everything were okay
  alert('I am content Name: ' + this.state.content);
  alert('I am content Age: ' + this.state.age);

// send data via ajax or axios

    this.setState({
      content: "",
age: ""
    })
  }


Content Name:<input type="text" className="input-status" id="content" name="content"
                    value={this.state.rec[this.state.currentRec].name}
                    onChange={e => this.handleNewChange(e)}
                  /><br />

Content Age:<input type="text" className="input-status" id="age" name="age"
                    value={this.state.rec[this.state.currentRec].Age}
                    onChange={e => this.handleNewChange(e)}                  
                  /><br />

动态内容显示在表单中。

我的问题是每次单击提交按钮时，由于警报为空，因此没有发布姓名和年龄的数据。我该如何解决这个问题？

这是整个代码：

<!DOCTYPE html>
<html>
   <head>

   </head>
   <body>


<style>

.pic{
background:blue; color:white;}
</style>

<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="build/browser.min.js"></script>


  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>




<div id="app"></div>

<script type="text/babel">

class Application extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      rec: [
        { name: "Tony", Age: "18" },
        { name: "John", Age: "21" },
        { name: "Luke", Age: "78" },
        { name: "Mark", Age: "90" },
        { name: "Jame", Age: "87" },
        { name: "Franco", Age: "34" },
        { name: "Franco", Age: "34" },
        { name: "Biggard", Age: "19" },
        { name: "tom", Age: "89" }
      ],
      currentRec: undefined,
content: "",
age: ""
    };
    this.viewData = this.viewData.bind(this);
this.handleNewChange = this.handleNewChange.bind(this);
this.handleNewSubmit = this.handleNewSubmit.bind(this);
  }

  // Display Data in a Modal when View button is Clicked

 // viewData = (i) => {

 viewData(i){
    this.setState({ currentRec: i });
    console.log(`Selected record index: ${i}`);
  }



handleNewChange(event) {
  
this.setState({
    [event.target.name]: event.target.value,
  })
}

  handleNewSubmit(event) {

// alert form data if everything were okay
  alert('I am content Name: ' + this.state.content);
  alert('I am content Age: ' + this.state.age);

// send data via ajax or axios

    this.setState({
      content: "",
age: ""
    })
  }

  render() {
    return (
      <div className="container">
        <div>
          <h3>List of Records</h3>
          <ul>
            {this.state.rec.map((obj, i) => (
              <li key={i}>
                {obj.name} - {obj.Age}{" "}
                <button
                  type="button"
                  onClick={() => { this.viewData(i); }}
                  className="btn btn-primary btn-sm"
                  data-toggle="modal"
                  data-target="#myModal"
                >
                  view from Modal
                </button>
              </li>
            ))}
          </ul>
        </div>
        <div className="modal" id="myModal">
          <div className="modal-dialog">
            <div see={this.see} className="modal-content">
              <div className="modal-header">
                <h4 className="modal-title">Show Records in Modal</h4>
                <button type="button" className="close" data-dismiss="modal">
                  &times;
                </button>
              </div>

              {this.state.currentRec !== undefined && 
                  <div className="modal-body">
                    Name: {this.state.rec[this.state.currentRec].name} <br />
                    Age: {this.state.rec[this.state.currentRec].Age} <br />






Content Name:<input type="text" className="input-status" id="content" name="content"
                    value={this.state.rec[this.state.currentRec].name}
                    onChange={e => this.handleNewChange(e)}
                  /><br />

Content Age:<input type="text" className="input-status" id="age" name="age"
                    value={this.state.rec[this.state.currentRec].Age}
                    onChange={e => this.handleNewChange(e)}                  
                  /><br />




 <button
                    className="btn btn-primary btn-lg"
                    onClick={e => this.handleNewSubmit(e)}
                  >
                    Submit
                  </button>



                  </div>}

              <div className="modal-footer">
                <button
                  type="button"
                  className="btn btn-danger"
                  data-dismiss="modal"
                >
                  Close
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

/*
ReactDOM.render(
  <Application/>,
  document.body
);
*/


ReactDOM.render(<Application />, document.getElementById('app'));


</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


   </body>
</html>

标签： reactjs

reactjs - 如何使用 React.js 从模态发布动态表单数据

问题描述

解决方案

推荐阅读