React表单取值

最新推荐文章于 2024-05-14 14:35:02 发布

肆意&

最新推荐文章于 2024-05-14 14:35:02 发布

阅读量147

点赞数 1

分类专栏： react 文章标签： react js

本文链接：https://blog.csdn.net/qq_33498329/article/details/116120504

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/react.development.js"></script>
  <script src="js/react-dom.development.js"></script>
  <script src="js/babel.min.js"></script>
  <script src="js/prop-types.js"></script>

</head>
<body>

<div id="test2"></div>

<script type="text/babel">


  class ClassComponent extends React.Component {

    state = {
      form: {}
    }
    saveData = (attrName) => {
      return (e) => {
        this.setState(state => ({
          form: {
            ...state.form,
            [attrName]: e.target.value
          }
        }))
      }
    }

    render() {
      return (
        <div>
          {JSON.stringify(this.state.form)}
          <form onSubmit={(e) => {
            console.log(e);
            e.preventDefault()
          }}>
            <input onChange={this.saveData("name")}/>
            <input onChange={this.saveData("age")}/>
            <button onClick={() => {
              alert(`您提交的姓名为${this.state.form.name},您的年龄为${this.state.form.age}`)
            }}>提交
            </button>
          </form>
        </div>
      );
    }
  }

  ReactDOM.render(<ClassComponent/>, document.getElementById('test2'))
</script>

</body>
</html>