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

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

如何將 Props() 值傳遞給 setState() 以使用 ReactJs 使模態表單可編輯

如何將 Props() 值傳遞給 setState() 以使用 ReactJs 使模態表單可編輯

MMMHUHU 2022-07-15 09:20:26
我正在創建我可以訪問他/她的博客的blog地方。在這里,我將數據彈出到一個模態中以使這個..usereditedit因此,經過所有調試和更好的思考,我已經弄清楚了。這是我更新的工作代碼modal感謝您的時間。    const EditBlog = ({ toggle, onTodoChange, onSubmit, ...state}) => {    return(         <span>            <Modal                 isOpen = {state.modal && state.requiredItem === state._id}                toggle = {()=>this.toggle(state._id)}                >                <ModalHeader toggle={toggle}  style={{fontWeight: "bold"}}>                    Edit your blog {state.blog_name}                </ModalHeader>                <ModalBody>                    <Form onSubmit={e => onSubmit(e, state._id )}>                        <FormGroup>                            <Label for="blogHeading">Blog Heading</Label>                            <Input type="text" name="blog_short_desc" id="blogHeading" placeholder="Update one liner"                            onChange={onTodoChange} defaultValue={state.blog_short_desc}/>                            <Label for="blogName">Blog Name</Label>                            <Input type="text" name="blog_name" id="blogName" placeholder="Update blog name"                            onChange={onTodoChange} defaultValue={state.blog_name}/>                            <Label for="desc1">Description </Label>                            <Input type="textarea" name="blog_desc" id="desc1" placeholder="Update your blog"                            onChange={onTodoChange} defaultValue={state.blog_desc}/>                            >Edit blog</Button>                        </FormGroup>                </Form>                </ModalBody>            </Modal>        </span>    )}
查看完整描述

4 回答

?
海綿寶寶撒

TA貢獻1809條經驗 獲得超8個贊

首先,不可編輯的錯誤是由于在“defaultValue”內部的模態中使用“value”道具輸入的。如果你使用價值,你總是給它初始道具的價值。使用默認值。使用 defaultValue 使其成為受控組件。在此處閱讀有關 Stackoverflow 的更多信息。更改它并查看下一個問題(如果有)。

其次,確保避免使用 UNSAFE_componentWillReceiveProps()。查看您的 componentWillRecieveProps 方法,文檔中所說的可能在起作用:

“調用 this.setState() 通常不會觸發 UNSAFE_componentWillReceiveProps()。”

更新:

刪除 componentWillReceiveProps 方法。提交應該工作。并確保用戶經過身份驗證。


查看完整回答
反對 回復 2022-07-15
?
POPMUISE

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

我已經弄清楚了

  1. OnClickedit按鈕我傳遞了所有必需的數據。所以,我replaceModalItem()將所有數據綁定在一起setState()

  2. replaceModalItem我調用這些數據并將其設置為setState().

  3. Edit.js我已經調用了所有的state值。

因此,在輸入字段中獲取所有必需的值,并將其設置為defaultValue

http://img1.sycdn.imooc.com//62d0c11e0001efcf06570286.jpg

查看完整回答
反對 回復 2022-07-15
?
Cats萌萌

TA貢獻1805條經驗 獲得超9個贊

當用戶正在編輯他們的博客時,獲取他們的博客信息并創建一個像這樣的對象


userBlogData={

  blog_heading: 'users blog heading',

  blog_name: 'users blog name',

  description: 'users blog description',

  image_url: 'users blog image url',

}

根據這些對象更新模態表單。例如:


<input name="blog_heading" value={blog_heading} ... />

用戶編輯對象后,您可以在服務器上發出更新請求并同時調用 get 函數來更新博客。您可以在編輯組件上保留更新功能。但是 get 函數將作為道具傳遞。


希望這可以幫助


這應該給你的想法......................


    // Edit Component


    this.state = {

       blog_name:this.props.data.blog_name

    }

    onBlogUpdate = () => {

      let payload = this.state

      API CALL...

     }

    ...

     render(){

        return(

            <input value={this.state.blog_name} name='blog_name' onChange={...} ... />

        )

     }


查看完整回答
反對 回復 2022-07-15
?
米脂

TA貢獻1836條經驗 獲得超3個贊

在我看來,您的onTodoChange函數正在父Blogs組件上設置狀態,但該狀態不會使其返回輸入值。相反,父級將一個blogs道具傳遞給EditBlogs,并且由于onTodoChange從不影響blogs,因此輸入value保持不變。

這意味著您的輸入的onChange事件值 ( e.target.value) 永遠不會返回到輸入的value屬性,因此輸入實際上不會更改值。

由于和中的blog_值都是編輯表單的本地值,我建議將它們移至該級別..不需要了解這些內容,它會簡化事情 -將事件值設置為,這將正確流動回到輸入作為值。stateonTodoChangeBlogsonTodoChangestate

你的blogs道具應該只設置初始的state.


查看完整回答
反對 回復 2022-07-15
  • 4 回答
  • 0 關注
  • 285 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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