为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

一只斗牛犬 2022-09-29 17:14:56
我想将孩子传递给父母。我甚至不知道这是否是正确的表达方式。但这是我的代码。代码以前工作过,但我试图将我的代码分解成更小的组件并处理错误。如果你想要更多的代码,我很乐意分享。我对 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>    )}
查看完整描述

3 回答

?
LEATH

TA贡献1936条经验 获得超6个赞

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


子组件保存输入字段,我们将把输入字段值发送到父组件。因此,让我们先创建父组件。


父.js


import Child from "./Child";

   function Parent() {

        const [name, setName] = useState("");

        const [password, setPassword] = useState("");

    

        const onChangeName=(newValue)=>{

          setName(newValue);

        }

    

        const onChangePassword=(value)=>{

          setPassword(value);

        }

        // We pass a callback to Child

        return (

       <Child  onChangeName={onChangeName} onChangePassword={onChangePassword} />;

    )}

如您所见,我们将 onChange 属性设置为子组件。下一步是创建子组件。


儿童.js


    function Child(props) {

           

 return(

 <input  onChange={(e)=>{props.onChangeName(e.target.value)}} />

 <input  onChange={(e)=>{props.onChangePassword(e.target.value)}} />

       )}

在上面的代码中,我们创建了函数句柄更改,该函数将值通过 props.onChange 传递到我们的父组件。


查看完整回答
反对 回复 2022-09-29
?
慕村9548890

TA贡献1884条经验 获得超4个赞

为此,您必须按如下方式实现它。


父母:


<Inputs

  hasInputs={hasInputs}

  onSubmit={this.handleSubmit}

  thoughtProp={this.state.thought}

  onChange={(event, index) => this.handleChange(event, index)}

/>;

孩子:


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, index) => props.onChange(event, index)}

            className="textInputs"

          />

        ))}

        {props.hasInputs ? (

          <input

            className="submitThoughts"

            type="submit"

            value="Submit Thought!"

          />

        ) : null}

      </ol>

    </form>

  );

};


查看完整回答
反对 回复 2022-09-29
?
慕村225694

TA贡献1880条经验 获得超4个赞

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



查看完整回答
反对 回复 2022-09-29
  • 3 回答
  • 0 关注
  • 120 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信