父母亲js公司

import React, { useState } from 'react'
import Child from './Child'

const Parent = () => {
    const[data,setData] = useState('')
    const[name,setName] = useState('')
    const[toggled,setToggled] = useState(false)
    const[age,setAge] = useState('')

    const ageToChild = (ageData) =>{
        setAge(ageData)
    }
    const childToParent = (childData) =>{
        setData(childData)
    }

    const handleSubmit = (e) =>{
        e.preventDefault()
        alert(`Age is ${age} , Form Submitted`)
        console.log(`Name is ${name} and Age is ${age}`)
    }
  return (
    <>
        {data}
        <div>
            {/* <Child childToParent={childToParent}></Child> */}
            <form onSubmit={handleSubmit}>
                <label>Name : </label>
                <input type="text" value={name} onChange={(e)=>setName(e.target.value)}></input>
                <button type='button' onClick={()=>setToggled(!toggled)}>Age ?</button>
                {toggled && <Child childToParent={childToParent} ageToChild={ageToChild}></Child>}
                <button type='button'>Submit</button>
            </form>
        </div>
    </>
  )
}

export default Parent

小孩js公司

import React from 'react'

const Child = ({childToParent,ageToChild}) => {
    const data = "This is some data from the child component to parent"
    // const age = ageToChild
  return (
    <>
        <button onClick={()=>childToParent(data)}>Click Child</button>
        <label>Age : </label>
        <input type='text' onChange={()=>ageToChild()}></input>
    </>
  )
}

export default Child

由于Name是inputtedname,Age是未定义的,所以我正在获取输出,如何在控制台中获取用户输入的Age值?

推荐答案

如果要将年龄值传递给子级的alert().js组件,您应该将e.target.value添加到onChange:

<input type='text' onChange={(e)=>ageToChild(e.target.value)}></input>

Javascript相关问答推荐

使用JavaScript/PHP将二维码保存为服务器端的图像

Webpack将懒惰加载的模块放入主块中

为什么我的第二个OnClick Isloading值在TEK查询Mutations 查询中不起作用?

在JavaScript中打开和关闭弹出窗口

如何最好地从TypScript中的enum获取值

togglePopover()不打开但不关闭原生HTML popover'

当试图显示小部件时,使用者会出现JavaScript错误.

你怎么看啦啦队的回应?

如何从隐藏/显示中删除其中一个点击?

为什么useState触发具有相同值的呈现

如何创建返回不带`new`关键字的实例的类

如何在箭头函数中引入or子句?

让chart.js饼图中的一个切片变厚?

回溯替代方式

AJAX POST在控制器中返回空(ASP.NET MVC)

在D3条形图中对具有相同X值的多条记录进行分组

如何使用画布在另一个内部绘制一个较小但相同的形状,同时保持恒定的边界厚度?

通过跳过某些元素的对象进行映射

postman 预请求中的hmac/sha256内标识-从js示例转换

为什么我不能使用其同级元素调用和更新子元素?