zoukankan      html  css  js  c++  java
  • react中的ref在input中的详解

    当我们在项目中遇见文本输入框的时候,获取时刻输入框中的值

    1、受控组件

    class NameForm extends React.Component {
      constructor(props) {
        super(props);
        this.state = {value: ''};
      }
     render() {
        return (
              <input type="text" value={this.state.value} onChange={this.handleChange} />
        );
      }
       handleChange(event) {
        this.setState({value: event.target.value});
      }
    }

    2、非受控组件

    class NameForm extends React.Component {
      constructor(props) {
        super(props);
        this.state = {value: ''};
      }
     render() {
        return (
              <input 
              type="text"
              ref={el=>this.input =el}
               placeholder="演出/艺人/场馆"//输入框中默认的value
           />
          <button
              onClick={
                 this.Searchtitle.bind(this)
              }
          ></button>
        );
      }
      Searchtitle(){
        console.log(this.input.value) //实时的获取输入框中的值
      }
    }
  • 相关阅读:
    ros 录制
    shell 截取字符串
    Linux 关机
    shell获取字符串长度
    ubuntu14.04 设置开机自启动脚本
    获取本机ip的shell脚本
    shell 杀掉指定进程的服务
    html 绘制矩形轨迹,选中区域
    shell模拟ctrl c停止
    shell 字符串提取数字
  • 原文地址:https://www.cnblogs.com/houjl/p/10116887.html
Copyright © 2011-2022 走看看