获取input值-react

最新推荐文章于 2023-09-23 23:06:56 发布

AC_QI

最新推荐文章于 2023-09-23 23:06:56 发布

阅读量792

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_60297110/article/details/126646823

版权

类组件中的受控组件

export default class ToDoList extends Component {
  // 存储数据 
  state = {
    val: ''
  }
  
  showVal = () => {
    console.log(this.state.val);
    // 修改数据得使用 setState
    this.setState({ val: '' })
  }
  
   render() {
    const { val } = this.state;
        return (
        <div>
          <input
            type="text"
            value={val}
            // 必填
            onChange={e => this.setState({ val: e.target.value })}
            placeholder='类组件中的受控组件' />
          <button
            onClick={this.showVal}
          >
            类组件中的受控组件
          </button>
        </div>
    )
  }
}

类组件中的不受控组件

    <input
     type="text"
    // 存储到 this 的属性上
    ref={node => this.inp = node}
    placeholder='类组件中的不受控组件' />
    <button onClick={this.showValNo}>
        类组件中的不受控组件
    </button>

函数组件中的受控组件

import React, { useState } from 'react';
export default function Cart() {
  const [valSk, useValSK] = useState('');
  function toShowSK() {
    console.log('valSk', valSk);
    useValSK('');
  }
   return (
      <div>
        <input
          type="text"
          value={valSk}
          onChange={e => useValSK(e.target.value)}
          placeholder='函数组件中的受控组件' />
        <button onClick={toShowSK}>函数组件中的受控组件</button>
      </div>
            )
}

函数组件中的ref

import React, { useState, useRef } from 'react'
export default function Cart() {
  const inputRef = useRef();
  function toShowSKNo() {
    console.log(' inputRef.current.value', inputRef.current.value);
    inputRef.current.value = '';
  }
  xxxx
     <div>
        <input
          type="text"
          // 不能以下写法
          // ref={inputAAA => this.input = inputAAA}
          ref={inputRef}
          placeholder='函数组件中的ref' />
        <button onClick={toShowSKNo}>函数组件中的ref</button>
      </div>