react--获取react中组件的dom元素内容-ref操作--this.refs+ref（分别为 function 和class中的ref使用）

最新推荐文章于 2024-05-16 15:39:47 发布

咩有猫腻.

最新推荐文章于 2024-05-16 15:39:47 发布

阅读量1.3k

点赞数

分类专栏：三-框架类 reactjs

本文链接：https://blog.csdn.net/DcTbnk/article/details/107692754

版权

三-框架类同时被 2 个专栏收录

83 篇文章 0 订阅

订阅专栏

reactjs

31 篇文章 0 订阅

订阅专栏

ref属性

class定义的组件中可以使用this.refs

function定义的组件中可以使用useRef

受控组件和非受控组件

从两者的使用情况来看，function明显比class使用起来更方便简单

react—class中this.refs + ref的使用

在这里插入图片描述

 <title>ref操作</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./libs/babel.min.js"></script>
    <script src="./libs/react.js"></script>
    <script src="./libs/react-dom.js"></script>
    <script type="text/babel">
      class App extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            name: "",
            skills: "",
            desc: "",
          };
        }
        render() {
          return (
            <ul>
              <li>
                <input ref="name" type="text" placeholder="请输入名字" />
              </li>
              <li>
                <input ref="desc" type="text" placeholder="请输入简介" />
              </li>
              <li>
                <input ref="skills" type="text" placeholder="请输入技能" />
              </li>
              <li>
                <button
                  onClick={() => {
                    // 非受控组件，组件的数据不受state状态管理,在获取的时候直接通过ref属性进行获取
                    // 受控组件
                    console.log(this.refs);
                    this.refs.name.style.color = "red";
                    console.log(this.refs.name.value);
                    console.log(this.refs.skills.value);
                    console.log(this.refs.desc.value);
                  }}
                >
                  提交
                </button>
              </li>
            </ul>
          );
        }
      }
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
  </body>

react—function中this.refs + ref的使用

在这里插入图片描述

   <title>ref-function操作</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./libs/babel.min.js"></script>
    <script src="./libs/react.js"></script>
    <script src="./libs/react-dom.js"></script>
    <script type="text/babel">
      const { useRef } = React;

      function App() {
        const name = useRef(); // 可以为标签定义个一个ref属性，在组件中直接获取他的内容
        const desc = useRef();
        const skills = useRef();
        return (
          <ul>
            <li>
              <input ref={name} type="text" placeholder="请输入名字" />
            </li>
            <li>
              <input ref={desc} type="text" placeholder="请输入简介" />
            </li>
            <li>
              <input ref={skills} type="text" placeholder="请输入技能" />
            </li>
            <li>
              <button
                onClick={() => {
                  console.log(name.current.value);
                  console.log(desc.current.value);
                  console.log(skills.current.value);
                }}
              >
                提交
              </button>
            </li>
          </ul>
        );
      }
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
  </body>

同上效果一样，只不过不用ref

 <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./libs/react.js"></script>
    <script src="./libs/react-dom.js"></script>
    <script src="./libs/babel.min.js"></script>
    <script type="text/babel">
      const { useState } = React;
      function App() {
        const [name, setName] = useState();
        const [desc, setDesc] = useState();
        const [skills, setSkills] = useState();
        return (
          <div>
            <ul>
              <li>
                <input
                  onKeyUp={(e) => setName(e.target.value)}
                  type="text"
                  placeholder="请输入名字"
                />
              </li>
              <li>
                <input
                  onKeyUp={(e) => setDesc(e.target.value)}
                  type="text"
                  placeholder="请输入个人简介"
                />
              </li>
              <li>
                <input
                  onKeyUp={(e) => setSkills(e.target.value)}
                  type="text"
                  placeholder="请输入技能"
                />
              </li>
            </ul>
            <button
              onClick={() => {
                console.log(name);
                console.log(desc);
                console.log(skills);
              }}
            >
              提交
            </button>
          </div>
        );
      }
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
  </body>

咩有猫腻.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react--获取react中组件的dom元素内容-ref操作--this.refs+ref（分别为 function 和class中的ref使用）

从两者的使用情况来看，function明显比class使用起来更方便简单react—class中this.refs + ref的使用 <title>ref操作</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <script src="./li
复制链接

扫一扫