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;

关于如何安装，我的上篇文章

那么React里面的slot在React里面怎么写呢 props.children

  render() {
    return <div className="Mask">
      {this.props.children}
      </div>;
  }