在 React 中将更改事件从子级传递到父级

Question

我想将孩子传递给父母。我甚至不知道这是否是正确的表达方式。但这是我的代码。代码以前工作过，但我试图将我的代码分解成更小的组件并处理错误。如果你想要更多的代码，我很乐意分享。我对 React 有点陌生。我不知道我做错了什么。错误基本上是采取的函数没有得到任何东西。onChangeevent

父母：

        <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 中使用钩子更改子组件的父组件状态子组件保存输入字段，我们将把输入字段值发送到父组件。因此，让我们先创建父组件。父.jsimport Child from "./Child";&nbsp; &nbsp;function Parent() {&nbsp; &nbsp; &nbsp; &nbsp; const [name, setName] = useState("");&nbsp; &nbsp; &nbsp; &nbsp; const [password, setPassword] = useState("");&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; const onChangeName=(newValue)=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setName(newValue);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; const onChangePassword=(value)=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setPassword(value);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; // We pass a callback to Child&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp;<Child&nbsp; onChangeName={onChangeName} onChangePassword={onChangePassword} />;&nbsp; &nbsp; )}如您所见，我们将 onChange 属性设置为子组件。下一步是创建子组件。儿童.js&nbsp; &nbsp; function Child(props) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;return(&nbsp;<input&nbsp; onChange={(e)=>{props.onChangeName(e.target.value)}} />&nbsp;<input&nbsp; onChange={(e)=>{props.onChangePassword(e.target.value)}} />&nbsp; &nbsp; &nbsp; &nbsp;)}在上面的代码中，我们创建了函数句柄更改，该函数将值通过 props.onChange 传递到我们的父组件。

Answer 2

为此，您必须按如下方式实现它。父母：<Inputs&nbsp; hasInputs={hasInputs}&nbsp; onSubmit={this.handleSubmit}&nbsp; thoughtProp={this.state.thought}&nbsp; onChange={(event, index) => this.handleChange(event, index)}/>;孩子：import React from 'react';import { Input } from '../Input.js';export const Inputs = (props) => {&nbsp; return (&nbsp; &nbsp; <form className="flex-item-main form" onSubmit={props.onSubmit}>&nbsp; &nbsp; &nbsp; <ol>&nbsp; &nbsp; &nbsp; &nbsp; {props.thoughtProp.map((input, index) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onSubmit={props.onSubmit}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={index}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={input}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={(event, index) => props.onChange(event, index)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="textInputs"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; {props.hasInputs ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="submitThoughts"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="submit"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value="Submit Thought!"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; ) : null}&nbsp; &nbsp; &nbsp; </ol>&nbsp; &nbsp; </form>&nbsp; );};

Answer 3

句柄更改函数在哪里？在输入组件中，在 “组件旁边，应包含 .onSubmit={props.onSubmit}onChange={props.onChange}