在 React 中将 onChange 事件从子级传递给父级

Question

我想将它onChange从孩子传递给父母。我什至不知道这是否是正确的表达方式。但这是我的代码。该代码以前可以工作，但我正在尝试将代码分解为更小的组件并处理错误。如果您想要更多代码，我很乐意分享。我对 React 有点陌生。我不知道我做错了什么。错误基本上是接受的函数event没有得到任何东西。

家长：

        <Inputs hasInputs={hasInputs} onSubmit={this.handleSubmit} thoughtProp={this.state.thought} onChange={this.handleChange} />

孩子：

import React from 'react'
import { Input } from '../Input.js'

export const Inputs = (props) => {
    return (
    <form className="flex-item-main form" onSubmit={props.onSubmit}>
        <ol>
            {props.thoughtProp.map((input, index) => (
            <Input type='text' onSubmit={props.onSubmit} key={index} value={input} onChange={(event) => props.onChange(event, index) } className='textInputs' />
            ))}
            { props.hasInputs ? (
            <input className='submitThoughts' type='submit' value='Submit Thought!' />
            ) : (
            null
            )}
        </ol>
    </form>
    )
}

Answer 1

在 React 中使用钩子更改子组件的父组件状态

\n

子组件保存输入字段，我们将把输入字段值发送到父组件。所以让\xe2\x80\x99s先创建Parent组件。

\n

父.js

\n

import Child from "./Child";\n   function Parent() {\n        const [name, setName] = useState("");\n        const [password, setPassword] = useState("");\n    \n        const onChangeName=(newValue)=>{\n          setName(newValue);\n        }\n    \n        const onChangePassword=(value)=>{\n          setPassword(value);\n        }\n        // We pass a callback to Child\n        return (\n       <Child  onChangeName={onChangeName} onChangePassword={onChangePassword} />;\n    )}\n

\n

正如您所看到的，我们将 onChange 属性设置为 Child 组件。下一步是创建子组件。

\n

Child.js

\n

    function Child(props) {\n           \n return(\n <input  onChange={(e)=>{props.onChangeName(e.target.value)}} />\n <input  onChange={(e)=>{props.onChangePassword(e.target.value)}} />\n       )}\n

\n

在上面的代码中，我们创建了函数handleChange，它将通过 props.onChange 将值传递给我们的父组件。

\n