【20】前端实习：react官方文档学习（表单（form）)

【1】表单FORM

HTML <form> 标签

***********************TIP************************

阻止元素发生默认的行为

event.preventDefault();

 ***********************TIP************************

表单注册：

由于value属性是在我们的表单元素上设置的，因此显示的值将始终为this.state.value，使React状态成为真实的来源。由于handleChange每次按键都会运行以更新React状态，因此显示的值将在用户键入时更新。

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';


class ShowIt extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    }
    this.handleSubmitForm = this.handleSubmitForm.bind(this);
    this.handleChange = this.handleChange.bind(this)
}

  handleSubmitForm(e) {
    alert(this.state.value + '被提交了');
    e.preventDefault();
  }

  handleChange(e) {
    this.setState (
      {
        value: e.target.value
      }
    )
  }


  render() {
    return (
      <form onSubmit={this.handleSubmitForm}>
        <label>name:
        <input type="text" value={this.state.value} onChange={this.handleChange}></input>
        </label>
        <input type="submit" value="submit"></input>
      </form>
    )
  }
}
ReactDOM.render(
  <ShowIt />,
  document.getElementById('root')
);

serviceWorker.unregister();

 

效果：

 

 

【用select创建下拉列表】

在html里，默认指定是用selected，react不用这种，在状态State里写。

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';


class ShowIt extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '3'
    }
    this.handleSubmitForm = this.handleSubmitForm.bind(this);
    this.handleChange = this.handleChange.bind(this)
}

  handleSubmitForm(e) {
    alert(this.state.value + '被提交了');
    e.preventDefault();
  }

  handleChange(e) {
    this.setState (
      {
        value: e.target.value
      }
    )
  }

  render() {
    return (
      <form onSubmit={this.handleSubmitForm}>
        <label>name:</label>
        <select value={this.state.value} onChange={this.handleChange}>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        </select>   
        <input type="submit" value="submit"></input>
      </form>
    )
  }
}
ReactDOM.render(
  <ShowIt />,
  document.getElementById('root')
);

serviceWorker.unregister();

HTML5 multiple属性：允许接收用户上传的多个文件字段（比如，多选图片上传）

 

 

处理多个输入

当您需要处理多个受控input元素时，您可以为每个元素添加一个name属性，让处理程序函数根据值来选择要执行的操作event.target.name。

例如：

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <form>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

 

请注意我们如何使用ES6 计算属性名称语法来更新与给定输入名称对应的状态键：

this.setState({
  [name]: value
});

它相当于这个ES5代码：

var partialState = {};
partialState[name] = value;
this.setState(partialState);

此外，由于setState()自动将部分状态合并到当前状态，我们只需要使用更改的部分调用它。