首頁猿問在 React...

在 React 中將更改事件從子級傳遞到父級

JavaScript

一只斗牛犬 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條經驗獲得超7個贊

在 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 (

<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 關注
158 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在 React 中將更改事件從子級傳遞到父級

在 React 中將更改事件從子級傳遞到父級

3 回答

添加回答