React-ref-form(失去焦点/获取焦点)

最新推荐文章于 2024-05-31 15:55:59 发布

Guo努力

最新推荐文章于 2024-05-31 15:55:59 发布

阅读量2.3k

点赞数

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

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

版权

Web # react 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.功能描述：

定义一个输入框，当失去焦点时页面弹窗显示输入的内容。

    class Form extends React.Component {
      handleBlur=(e)=>{
        console.log(e.target.value);
        alert(e.target.value)
      }
      render() {
        return (
          <div>
            <input type="text" onBlur={this.handleBlur} />
          </div>
        )
      }
    }
    ReactDOM.render(<Form />, document.getElementById("app"));

执行结果如下：当输入框失去焦点时，页面弹出提示框（ alert ）显示内容为输入框的内容。

2.功能描述：

定义一个输入框及一个按钮，当点击按钮时，页面弹出提示框（ alert ）显示内容为输入框的内容。

    class Form extends React.Component {
      constructor(){
        super()
        this.inputRef=React.createRef()
      }
      handleClick = () => {
        alert(this.inputRef.current.value)
      }
      handleBlur=(e)=>{
        console.log(e.target.value);
        alert(e.target.value)
      }
      render() {
        return (
          <div>
            <input type="text" onBlur={this.handleBlur} />
            <br />
             <input type="text" ref={this.inputRef} />
             <br />
            <button onClick={this.handleClick}>提交</button>
          </div>
        )
      }
    }
    ReactDOM.render(<Form />, document.getElementById("app"));

执行结果如下：点击提交按钮，输入框失去焦点，页面弹出提示框（ alert ）显示内容为输入框的内容。

3.功能描述：

定义一个输入框及一个按钮，当点击按钮时，输入框自动获取焦点。

      class Form extends React.Component {
      constructor(){
        super()
        this.inputRef=React.createRef()
      }
      handleClick = () => {
        this.inputRef.current.focus()
      }
      render() {
        return (
          <div>
             <input type="text" ref={this.inputRef} />
             <br />
            <button onClick={this.handleClick}>获取焦点</button>
          </div>
        )
      }
    }
    ReactDOM.render(<Form />, document.getElementById("app"));

执行结果如下：打开页面是输入框上没有焦点，当点击获取焦点按钮时，输入框就会自动获取到焦点。

4.功能描述：

定义一个输入框，当一刷新页面是，输入框自动获取焦点。

      class Form extends React.Component {
      constructor(){
        super()
        this.inputRef=React.createRef()
      }

      render() {
        return (
          <div>
             <input type="text" ref={this.inputRef} />
             
          </div>
        )
      }
      componentDidMount(){
        this.inputRef.current.focus()
      }
    }
    ReactDOM.render(<Form />, document.getElementById("app"));

执行结果如下：使用了生命钩子函数（ componentDidMount ）使其在页面刷新重新渲染DOM时自动获取焦点。