react---表单双向绑定---组件---子父传参案例

最新推荐文章于 2024-09-12 18:11:20 发布

温L

最新推荐文章于 2024-09-12 18:11:20 发布

阅读量334

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/lwf0829/article/details/122243920

版权

这篇博客探讨了在React.js中实现表单双向绑定的技巧，通过实例讲解了如何创建组件，并强调组件名应以大写字母开头。同时，文章详细阐述了子组件向父组件传递参数的方法。

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

表单双向绑定

import React, {
    Component, createRef } from 'react'

export default class App extends Component {
   
    constructor(props) {
   
        super(props);
        this.state = {
   
            msg: "你好啊，小朋友"
        };
        // 创建一个dom引用
        this.inpRef = createRef();
    }
    getVal = () => {
   
        // 获取表单值
        alert(this.inpRef.current.value)
    }
    chageMsg = (e) => {
   
    	 {
   /* 改变值 */}
        this.setState({
    msg: e.target.value })
    }
    render() {
   
        return (
            <div>
                {
   /* 受控表单-表单双向绑定 */}
                {
   /* 三种方法 */}
                <p>{
   this.state.msg}</p>
                <input type="text" value={
   this.state.msg} onChange={
   this.chageMsg}