React bind selcet

最新推荐文章于 2024-02-28 10:25:01 发布

qq_34351732

最新推荐文章于 2024-02-28 10:25:01 发布

阅读量194

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/qq_34351732/article/details/78570460

版权

react 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<html>
  <head>
      <title>Document</title>
      <script src="../react.js"></script>
      <script src="../react-dom.js"></script>
      <!-- //引用资源，JSX转HTML -->
      <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
  </head>

  <body>
      <div id="reactContainer"/>

      <script type="text/babel">
        var MyForm = React.createClass({
          getInitialState: () => ({
            username: '1',
            checked: true,
            gender: 'woman'
          }),

          handleChange: function(name, e) {
            const newState = {}
            newState[name] = name === 'checked' ? e.target.checked : e.target.value
            this.setState(newState)
            console.log(newState)
          },

          submitHandler: function(e) {
            e.preventDefault()
            var is = this.state.checked ? '是' : '不是'
            var gender = this.state.gender === 'man' ? '帅哥' : '美女'
            alert(this.state.username + is + gender)
          },

          render: function() {
            return (
              <form onSubmit={this.submitHandler}>
                <label htmlFor="username">input name：</label>
                <input type="text" id="username" onChange={this.handleChange.bind(this, 'username')} value={this.state.username} />
                <br/>
                <label htmlFor="checkbox">yes or no:</label>
                <input type="checkbox" id="checkbox" onChange={this.handleChange.bind(this, 'checked')} checked={this.state.checked} />
                <br/>
                <select onChange={this.handleChange.bind(this, 'gender')} value={this.state.gender}>
                  <option value="man">handsome</option>
                  <option value="woman">beautiful</option>
                </select>
                <br/>
                <button type="submit">submit</button>
              </form>
            )
          }
        })
        ReactDOM.render(
          <MyForm />,
          document.getElementById('reactContainer')
        )
      </script>
  </body>
</html>