React獲取文本內容（初級入門）

咱們知道在Vue中獲取文本框內容是這樣的

關於vue不作過多的贅述

<template>
     <div>
        <input type="text" v-model="text">
        <button @click="Obtain">獲取text文本框的值                 </button>
      </div>
</template>

<script>
  export default {
     data() {
        return {
            text: ""
        }
     },
     methods: {
        Obtain() {
        //這樣就直接獲取到了text中的值
            console.log(this.text);
        }
     }
 }
</script>

那麼React 中如何獲取文本呢？

方法一：經過event對象信息獲取

class App1 extends React.Component {
//state 至關因而Vue裏面的data
  state = {
     text: "",//默認初始值
  };

 hanChange = ev => {
    //onChange 爲Change事件，ev是傳遞的參數
    console.log(ev.target.value);
       //1.setState不會馬上改變React組件中state的值
      // 2.setState 經過觸發一次組件的更新來引起重繪.
      // 3.屢次 setState 函數調用產生的效果會合並。
    
    this.setState({
      text: ev.target.value
    });
    
    //點擊獲取文本值
    console.log(this.state.text);
  };

render() {
    return (
      <div className="App">
        <input type="text" onChange={ev => this.hanChange(ev)} />
      </div>
    );
  }


  } 
  //導出當前模塊
 export default App1;

方法二： 使用ref，經過ref自定義一個屬性名稱，經過this.refs.屬性名.value獲取到文本的內容

class App2 extends React.Component {
//state 至關因而Vue裏面的data
  state = {
     text: "",//默認初始值
  };

 hanChange() {
 //this.$refs.inputVal 獲取到當前的DOM元素
    console.log(this.$refs.inputVal.value);
    
    this.setState({
      text: this.$refs.inputVal.value
    });  
    //點擊獲取文本值
    console.log(this.state.text);
  };

render() {
    return (
      <div className="App">
        <input type="text" ref="inputVal" onChange={() => this.hanChange()} />
      </div>
    );
  }


  }
  export default App2;

關於如何安裝，個人上篇文章