React-ref-form 玩法（form表单收集）

最新推荐文章于 2024-05-14 14:35:02 发布

Guo努力

最新推荐文章于 2024-05-14 14:35:02 发布

阅读量1k

点赞数

分类专栏： Web # react 文章标签： react.js

本文链接：https://blog.csdn.net/qq_52522995/article/details/120621277

版权

Web # react 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文介绍了在React中获取用户输入框值的四种常见方式：通过refs的key值、函数引用、容器属性以及通过onChange事件监听。示例代码详细展示了每种方法的实现，并在点击提交按钮时在后台打印输入值。

摘要由CSDN通过智能技术生成

input收集数据的四种方案

实现功能：页面中显示一个输入框及一个提交按钮，当点击提交按钮button时，后台获取到输入框中所输入的内容。

实现过程：

首先定义一个类组件，使类组件挂载到DOM节点上，在类组件的render中返回一个输入框及一个提交按钮，给按钮绑定一个点击事件，当点击按钮时，触发事件在后台打印出输入框中的内容，代码如下：

  <script type="text/babel">
    class Form extends React.Component{

      constructor(){
        super();
        this.inputRef3=React.createRef()
      }
      handleClick=()=>{
        //第一种
        console.log(this.refs);
        console.log(this.refs.inputRef1);
        console.log(this.refs.inputRef1.value);
        //第二种
        console.log(this.inputRef2);
        console.log(this.inputRef2.value);
        //第三种
        console.log(this.inputRef3);
        console.log(this.inputRef3.current);
        console.log(this.inputRef3.current.value);
      }
        render(){
          return(
            <div>
                //第一种
                <input type="text" ref='inputRef1'/>
                <br/>
                //第二种
                <input type="text" ref={e=>this.inputRef2=e}/>
                <br/>
                //第三种
                <input type="text" ref={this.inputRef3}/>
                <br/>
                <button onClick={this.handleClick}>提交</button>
              </div>
          )
        }
    }
    ReactDOM.render(<Form />, document.getElementById("app"));
  </script>

执行结果如下：

通过三种不同的方法，都可获取到输入框的返回值，第一种方法是通过操作 ' key ' 获取数值，第二种是通过函数的属性来获取数值，第三种是通过容器属性找到返回的数值。

此外，还可以通过监听事件（onChange）的方法获取到数值，通过事件绑定的方法将修改的数据同步渲染。

      handleChange=(e)=>{
        console.log("handleChange");
        console.log(e.target.value);
      }
        render(){
          return(
            <div>
                <input type="text" onChange={this.handleChange}/>
                <br/>
                <button onClick={this.handleClick}>提交</button>
              </div>
          )
        }