如何将 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 使其成为受控组件。在此处阅读有关 Stackoverflow 的更多信息。更改它并查看下一个问题（如果有）。

其次，确保避免使用 UNSAFE_componentWillReceiveProps()。查看您的 componentWillRecieveProps 方法，文档中所说的可能在起作用：

“调用 this.setState() 通常不会触发 UNSAFE_componentWillReceiveProps()。”

更新：

删除 componentWillReceiveProps 方法。提交应该工作。并确保用户经过身份验证。

Answer 2

我已经弄清楚了

1. OnClickedit按钮我传递了所有必需的数据。所以，我replaceModalItem()将所有数据绑定在一起setState()

2. 在replaceModalItem我调用这些数据并将其设置为setState().

3. 在Edit.js我已经调用了所有的state值。

因此，在输入字段中获取所有必需的值，并将其设置为defaultValue

Answer 3

当用户正在编辑他们的博客时，获取他们的博客信息并创建一个像这样的对象

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={...} ... />

        )

     }

Answer 4

在我看来，您的onTodoChange函数正在父Blogs组件上设置状态，但该状态不会使其返回输入值。相反，父级将一个blogs道具传递给EditBlogs，并且由于onTodoChange从不影响blogs，因此输入value保持不变。

这意味着您的输入的onChange事件值 ( e.target.value) 永远不会返回到输入的value属性，因此输入实际上不会更改值。

由于和中的blog_值都是编辑表单的本地值，我建议将它们移至该级别..不需要了解这些内容，它会简化事情 -将事件值设置为，这将正确流动回到输入作为值。stateonTodoChangeBlogsonTodoChangestate

你的blogs道具应该只设置初始的state.