快捷導(dǎo)航

React獲取input值并提交的2種方法實例

更新時間：2021年04月14日 10:55:24 作者：GuanJdoJ

這篇文章主要給大家介紹了關(guān)于React獲取input值并提交的2種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

方法一利用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');
    //在此做提交操作，比如發(fā)dispatch等
  };
 
  render(){
    return(
      <div>
        <input
          value={this.state.InputValue}
          onChange={this.handleGetInputValue}
        />
        <button onClick={this.handlePost}>提交</button>
      </div>
    )
  }
}
 
export default InputDemo;

這里的<input />和<button />都是用的html的標(biāo)簽，當(dāng)然也可以使用Antd的<Input />和<Button />組件，里面的內(nèi)容是不變的

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

React認(rèn)為所有的狀態(tài)都應(yīng)該由 React 的 state 控制，只要類似于<input />、<textarea />、<select />這樣的輸入控件被設(shè)置了value值，那么它們的值永遠(yuǎn)以被設(shè)置的值為準(zhǔn)。如果值沒被改變，value就不會變化

React中要用setState才能更新組件的內(nèi)容，所以需要監(jiān)聽輸入框的onChange事件，獲取到輸入框的內(nèi)容后通過setState的方式更新state的InputValue，這樣<input />的內(nèi)容才會實時更新

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

target 事件屬性可返回事件的目標(biāo)節(jié)點（觸發(fā)該事件的節(jié)點），如生成事件的元素、文檔或窗口

詳情可見W3C標(biāo)準(zhǔn)介紹

方法二利用React的ref訪問DOM元素取值并提交

無狀態(tài)組件寫法：

const InputDemo = () => {
  let inputValue;
  const handlePost = (e) => {
    if (e) e.preventDefault();
    const valueTemp = inputValue.value;
    console.log(valueTemp, '------valueTemp');
    //在此做提交操作，比如發(fā)dispatch等
  };
 
  return (
    <div>
      <form onSubmit={handlePost}>
        <input
          ref={input => inputValue = input}
        />
        <button onClick={handlePost}>提交</button>
      </form>
    </div>
  )
};
 
export default InputDemo;

有狀態(tài)組件寫法：

import React from 'react';
 
class InputDemo extends React.Component {
  handlePost = (e) => {
    if (e) e.preventDefault();
    const valueTemp = this.inputValue.value;
    console.log(valueTemp, '------valueTemp');
    //在此做提交操作，比如發(fā)dispatch等
  };
 
  render() {
    return (
      <div>
        <form onSubmit={this.handlePost}>
          <input
            ref={input => this.inputValue = input}
          />
          <button onClick={this.handlePost}>提交</button>
        </form>
      </div>
    )
  }
};
 
export default InputDemo;

Ref 是 React 提供給我們的安全訪問 DOM 元素或者某個組件實例的句柄。我們可以為元素添加 ref 屬性，然后在回調(diào)函數(shù)中接受該元素在 DOM 樹中的句柄，該值會作為回調(diào)函數(shù)的第一個參數(shù)返回。

除了這兩種寫法，還可以利用Antd的Form組件實現(xiàn)表單功能，傳送門：React利用Antd的Form組件實現(xiàn)表單功能