如何将 Props() 值传递给 setState() 以使用 ReactJs 使模态表单可编辑

Question

我正在创建我可以访问他/她的博客的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>

    )

}

Answer 1

首先，不可编辑的错误是由于在“defaultValue”内部的模态中使用“value”道具输入的。如果你使用价值，你总是给它初始道具的价值。使用默认值。使用 defaultValue 使其成为受控组件。在此处阅读有关&nbsp;Stackoverflow 的更多信息。更改它并查看下一个问题（如果有）。其次，确保避免使用 UNSAFE_componentWillReceiveProps()。查看您的 componentWillRecieveProps 方法，文档中所说的可能在起作用：“调用 this.setState() 通常不会触发 UNSAFE_componentWillReceiveProps()。”更新：删除 componentWillReceiveProps 方法。提交应该工作。并确保用户经过身份验证。

Answer 2

我已经弄清楚了OnClickedit按钮我传递了所有必需的数据。所以，我replaceModalItem()将所有数据绑定在一起setState()在replaceModalItem我调用这些数据并将其设置为setState().在Edit.js我已经调用了所有的state值。因此，在输入字段中获取所有必需的值，并将其设置为defaultValue

Answer 3

当用户正在编辑他们的博客时，获取他们的博客信息并创建一个像这样的对象userBlogData={&nbsp; blog_heading: 'users blog heading',&nbsp; blog_name: 'users blog name',&nbsp; description: 'users blog description',&nbsp; image_url: 'users blog image url',}根据这些对象更新模态表单。例如：<input name="blog_heading" value={blog_heading} ... />用户编辑对象后，您可以在服务器上发出更新请求并同时调用 get 函数来更新博客。您可以在编辑组件上保留更新功能。但是 get 函数将作为道具传递。希望这可以帮助这应该给你的想法......................&nbsp; &nbsp; // Edit Component&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; &nbsp;blog_name:this.props.data.blog_name&nbsp; &nbsp; }&nbsp; &nbsp; onBlogUpdate = () => {&nbsp; &nbsp; &nbsp; let payload = this.state&nbsp; &nbsp; &nbsp; API CALL...&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp;render(){&nbsp; &nbsp; &nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input value={this.state.blog_name} name='blog_name' onChange={...} ... />&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp;}

Answer 4

在我看来，您的onTodoChange函数正在父Blogs组件上设置状态，但该状态不会使其返回输入值。相反，父级将一个blogs道具传递给EditBlogs，并且由于onTodoChange从不影响blogs，因此输入value保持不变。这意味着您的输入的onChange事件值 (&nbsp;e.target.value) 永远不会返回到输入的value属性，因此输入实际上不会更改值。由于和中的blog_值都是编辑表单的本地值，我建议将它们移至该级别..不需要了解这些内容，它会简化事情 -将事件值设置为，这将正确流动回到输入作为值。stateonTodoChangeBlogsonTodoChangestate你的blogs道具应该只设置初始的state.