从零一起学react(8)---表单的使用

前言

这篇文章将会实现下图的功能，算是对之前几篇文章的总结与巩固吧。

正文

这里使用的是Create React App。先在页面上显示一个h1标签和一个下拉框：

//App.js
import React from 'react';

export class App extends React.Component {
  render() {
    return (
      <div>
        <h1>My name is</h1>
        <select>
          <option value="BUPPT">BUPPT</option>
          <option value="Ben">Ben</option>
          <option value="Beijing">Beijing</option>
        </select>
      </div>
    );
  }
}
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {App} from './App';

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

然后给App组件添加一个state.name，给下拉框添加一个onChange事件，这个事件根据下拉框的内容改变state.name的内容。然后在h1标签中显示出来。

//App.js
import React from 'react';

export class App extends React.Component {
  constructor(props){
    super(props);
    this.state = { 
      name: 'BUPPT' 
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e){
    const name = e.target.value;
    this.setState({
      name: name
    });
  }
  render() {
    return (
      <div>
        <h1>My name is {this.state.name}!</h1>
        <select onChange={this.handleChange}>
          <option value="BUPPT">BUPPT</option>
          <option value="Ben">Ben</option>
          <option value="Beijing">Beijing</option>
        </select>
      </div>
    );
  }
}

类似的，新建一个Input.js文件，在index.js中引入。

//Input.js
import React from 'react';

export class Input extends React.Component {
  render() {
    return (
      <div>
        <input type="text" />
        <h1></h1>
      </div>
    );
  }
}
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {App} from './App';
import {Input} from './Input';
ReactDOM.render(
    <div>
        <App /><br/>
        <Input />
    </div>,
    document.getElementById('root')
);

给组件添加一个state.userInput，给input标签添加一个onChange事件，监听用户输入，根据用户输入修改state.userInput内容，然后在h1中显示出来。

//Input.js
export class Input extends React.Component {
  constructor(props){
    super(props);
    this.state={
      userInput: '请输入内容'
    };
    this.handleUserInput=this.handleUserInput.bind(this);
  }
  handleUserInput(e) {
   this.setState({
     userInput: e.target.value
   });
  }
  render() {
    return (
      <div>
        <input type="text" value={this.state.userInput} onChange={this.handleUserInput} />
        <h1>{this.state.userInput}</h1>
      </div>
    );
  }
}

这样就实现了开篇gif中的功能。