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

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

我應該如何更新我通過 props 從父組件發送的子組件中的數據

我應該如何更新我通過 props 從父組件發送的子組件中的數據

小怪獸愛吃肉 2022-09-02 16:28:45
我有一個父組件和4個子組件(如PARTCES)。從父母我發送到每個孩子自己的設置部分。用戶可以在每個子組件中更改這些設置?,F在我的問題是,當用戶通過輸入更改文本之類的東西時,我必須更改父級中的原始對象。我知道一個解決方案是為設置中的每個字段發送方法,但每個部分都有5個以上的字段,所以我認為這不是一個好的解決方案。這是我的渲染方法的相關部分:    /**     * Render method for user profile     * @return {*}     */    render() {        return (            <div className={'card p-3 '}>                <h2 className={'text-center mb-2'}>V?eobecné nastavenia</h2>                <Form>                    <Form.Row className={'d-flex '}>                        <Col md={4} sm={12} className={'order-2 order-md-1'}>                            <Form.Group className={'d-flex align-items-center justify-content-end'}>                                <Form.Label className={'mb-0 mr-2 customLabel'}><b>Meno:</b></Form.Label>                                <Form.Control size="sm" type="text" placeholder="First name"                                              defaultValue={this.props.userData.firstName}/>                            </Form.Group>                            <Form.Group className={'d-flex align-items-center justify-content-end'}>                                <Form.Label className={'mb-0 mr-2 customLabel'}><b>Priezvisko:</b></Form.Label>                                <Form.Control size="sm" type="text" placeholder="Last Name"                                              defaultValue={this.props.userData.lastName}/>                            </Form.Group>                            <Form.Group className={'d-flex align-items-center justify-content-end'}>                                <Form.Label className={'mb-0 mr-2 customLabel'}><b>Email:</b></Form.Label>                                <Form.Control size="sm" type="text" placeholder="Vá? email"                                              defaultValue={this.props.userData.email}/>                            </Form.Group>...我必須像前面說的那樣改變,等等,在父母中值。firstNamelastName有沒有一個很好的方法來做到這一點?謝謝你的幫助。我在CodeSandbox中構建了類似的情況:https://codesandbox.io/s/kind-panini-06qci?file=/src/App.js
查看完整描述

2 回答

?
紅糖糍粑

TA貢獻1815條經驗 獲得超6個贊

如果要使用子項上的值更新父項的狀態,則必須將事件處理程序從父項傳遞到子項。如果要解析子項與其父項之間的通信,只需使用兩個參數傳遞和事件處理程序:字段名稱及其值。使用js,您可以使用點表示法和括號表示法調用字段。在這種情況下,您必須使用括號表示法,并將第一個參數作為參數傳遞,并作為值來存儲第二個參數。


一些代碼:


在應用組件中,渲染如下所示:


render() {

    return (

      <div className="App">

        <Child data={this.state.object} clicked={this.updateValue} />

      </div>

    );

事件處理程序如下所示:


 updateValue = (field, value) => {

    let update = {};

    update[field] = value;

    this.setState({

      ...this.state,

      object: {

        ...this.state.object,

        update

      }

    });

  };

這是什么意思?該方法要做的第一件事是創建一個包含更新的對象更新,然后它執行淺層復制,最后,更新對象將其與更新合并。


子組件中每個 Form.控件的代碼如下所示:


<Form.Control

          size="sm"

          type="text"

          defaultValue={this.props.data.data1}

          onChange={(event) => this.props.clicked('data1', event.target.value)}

        />


查看完整回答
反對 回復 2022-09-02
?
滄海一幻覺

TA貢獻1824條經驗 獲得超5個贊

您可以根據變量設置 Form 組件的名稱,并在事件處理程序中使用它,如下所示:


<Form.Control

          name="data1"

          size="sm"

          type="text"

          defaultValue={this.props.data.data1}

          onChange={this.props.handleOnChange}

        />

處理程序類似于:


 handleOnChange = (e) => {

    this.setState({object: {...this.state.object, [e.target.name]: e.target.value}})

  }


<Child data={this.state.object} handleOnChange={this.handleOnChange} />


查看完整回答
反對 回復 2022-09-02
  • 2 回答
  • 0 關注
  • 187 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號