第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

在 React 中將更改事件從子級(jí)傳遞到父級(jí)

在 React 中將更改事件從子級(jí)傳遞到父級(jí)

一只斗牛犬 2022-09-29 17:14:56
我想將孩子傳遞給父母。我甚至不知道這是否是正確的表達(dá)方式。但這是我的代碼。代碼以前工作過，但我試圖將我的代碼分解成更小的組件并處理錯(cuò)誤。如果你想要更多的代碼，我很樂意分享。我對(duì) React 有點(diǎn)陌生。我不知道我做錯(cuò)了什么。錯(cuò)誤基本上是采取的函數(shù)沒有得到任何東西。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貢獻(xiàn)1936條經(jīng)驗(yàn) 獲得超7個(gè)贊

在 React 中使用鉤子更改子組件的父組件狀態(tài)


子組件保存輸入字段，我們將把輸入字段值發(fā)送到父組件。因此，讓我們先創(chuàng)建父組件。


父.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 屬性設(shè)置為子組件。下一步是創(chuàng)建子組件。


兒童.js


    function Child(props) {

           

 return(

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

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

       )}

在上面的代碼中，我們創(chuàng)建了函數(shù)句柄更改，該函數(shù)將值通過 props.onChange 傳遞到我們的父組件。


查看完整回答
反對(duì) 回復(fù) 2022-09-29
?
慕村9548890

TA貢獻(xiàn)1884條經(jīng)驗(yàn) 獲得超4個(gè)贊

為此，您必須按如下方式實(shí)現(xiàn)它。


父母：


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

  );

};


查看完整回答
反對(duì) 回復(fù) 2022-09-29
?
慕村225694

TA貢獻(xiàn)1880條經(jīng)驗(yàn) 獲得超4個(gè)贊

句柄更改函數(shù)在哪里？在輸入組件中，在 “組件旁邊，應(yīng)包含 .onSubmit={props.onSubmit}onChange={props.onChange}



查看完整回答
反對(duì) 回復(fù) 2022-09-29
  • 3 回答
  • 0 關(guān)注
  • 153 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)