【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()自動將部分狀態合併到當前狀態，我們只需要使用更改的部分調用它。