react 修改input的值【受控组件】

最新推荐文章于 2024-02-23 10:41:45 发布

____白山茶

最新推荐文章于 2024-02-23 10:41:45 发布

阅读量1.8k

点赞数

文章标签： react.js

本文链接：https://blog.youkuaiyun.com/weixin_50805397/article/details/120511537

版权

这篇博客探讨了两种在React中管理组件状态的方法：使用Hooks（useState）和传统Class Component（通过this.setState）。 Hooks方式简洁地展示了如何直接在函数组件中设置和更新状态，而常规实现则通过Class Component的state属性和方法进行状态管理和更新。两者都是React状态管理的有效手段，但Hooks为函数组件带来了类组件的特性，简化了代码结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方式1：hooks实现

import React ,{useState} from 'react'
export default function App() {
  let [val,setVal]=useState("123");
  return (
    <div>
      <input value={val} onChange={(e)=>setVal(e.target.value)}/>
    </div>
  )
}

方法2：常规实现

import React, { Component } from "react";
export default class App extends Component {
  state = { val: "国家" };
  fun1 = (e) => {
    this.setState({
      val: e.target.value,
    });
  };
  render() {
    let { list } = this.state;
    return (
      <div>
        <input
          type="text"
          placeholder="评论"
          value={this.state.val}
          onChange={(e) => {
            this.fun1(e);
          }}
        />
      </div>
    );
  }
}