方法一  利用DOM提供的Event物件的target事件屬性取值並提交

import React from 'react';

class InputDemo extends React.Component{
  state = {
    InputValue : "",//輸入框輸入值
  };

  handleGetInputValue = (event) => {
    this.setState({
      InputValue : event.target.value,
    })
  };

  handlePost = () => {
    const {InputValue} = this.state;
    console.log(InputValue,'------InputValue');
    //在此做提交操作，比如發dispatch等
  };

  render(){
    return(
      <div>
        <input
          value={this.state.InputValue}
          onChange={this.handleGetInputValue}
        />
        <button onClick={this.handlePost}>提交</button>
      </div>
    )
  }
}

export default InputDemo;
 

這裡的<input />和<button />都是用的html的標籤，當然也可以使用Antd的<Input />和<Button />元件，裡面的內容是不變的

首先在元件最上方state中定義了InputValue:"",下面<inpu t/>裡寫了value={this.state.InputValue}，如果去掉onChange事件，那麼這時候輸入框裡是什麼都輸入不了的，因為

React認為所有的狀態都應該由 React 的 state 控制，只要類似於<input />、<textarea />、<select />這樣的輸入控制元件被設定了value值，那麼它們的值永遠以被設定的值為準。如果值沒被改變，value就不會變化

React中要用setState才能更新元件的內容，所以需要監聽輸入框的onChange事件，獲取到輸入框的內容後通過setState的方式更新state的InputValue，這樣<input />的內容才會實時更新

再說onChange的handleGetInputValue方法，利用了DOM的Event物件的target事件屬性：

target 事件屬性可返回事件的目標節點（觸發該事件的節點），如生成事件的元素、文件或視窗

方法二  利用html5的<form />元件取值並提交

無狀態元件寫法：

const InputDemo = () => {
  let inputValue;
  const handlePost = (e) => {
    if (e) e.preventDefault();
    const valueTemp = inputValue.value;
    console.log(valueTemp, '------valueTemp');
    //在此做提交操作，比如發dispatch等
  };

  return (
    <div>
      <form onSubmit={handlePost}>
        <input
          ref={input => inputValue = input}
        />
        <button onClick={handlePost}>提交</button>
      </form>
    </div>
  )
};

export default InputDemo;
 

有狀態元件寫法：

import React from 'react';

class InputDemo extends React.Component {
  handlePost = (e) => {
    if (e) e.preventDefault();
    const valueTemp = this.inputValue.value;
    console.log(valueTemp, '------valueTemp');
    //在此做提交操作，比如發dispatch等
  };

  render() {
    return (
      <div>
        <form onSubmit={this.handlePost}>
          <input
            ref={input => this.inputValue = input}
          />
          <button onClick={this.handlePost}>提交</button>
        </form>
      </div>
    )
  }
};

export default InputDemo;