如何将Props（）值传递给setState（）以使模态形式可使用ReactJs进行编辑]]

Question

我正在创建我的blog，其中user可以edit来发表他/她的博客。在这里，我将数据弹出到一个模态中以使其成为edit。但是到目前为止，我可以使用props显示map中的数据。

如何制作此表格editable和submit。我已经尝试过SO的许多解决方案，但是不幸的是，我错过了一些解决方法。

您的任何帮助对我来说都是greatful。

谢谢您的时间。

Github link of my change

// blog.js

class Blogs extends Component{
    constructor(props) {
        super(props);
            this.state = {
                modal: false,
                justClicked: null,
                activePage: 1,
                requiredItem : null,
                _id: '',
                blog_short_desc: '',
                blog_name: '',
                blog_desc: '',
                blog_image_link: '',
                blog_by: '',
                blog_by_author: ''
            };
            this.handleOpenDialog = this.handleOpenDialog.bind(this);
            this.handleCloseDialog = this.handleCloseDialog.bind(this);
            this.replaceModalItem = this.replaceModalItem.bind(this);
            this.onTodoChange = this.onTodoChange.bind(this);

        }

    static propTypes = {
        getBlog: PropTypes.func.isRequired,
        deleteBlog: PropTypes.func.isRequired,
        updateBlog: PropTypes.func.isRequired,
        resume: PropTypes.object.isRequired,
        auth: PropTypes.object.isRequired,
        loading: PropTypes.object.isRequired
    }

    toggle = (id) => {
        this.setState({
            modal: !this.state.modal
        });
    }

    UNSAFE_componentWillReceiveProps(nextProps) {
        this.setState({
            value: nextProps.name
        })
    }

    componentDidMount() {
        this.props.getBlog();
    }

    replaceModalItem(id) {
        this.setState({
          modal: true,
          requiredItem: id
        });
    }

    onTodoChange = (e) => {
        this.setState({ 
            [e.target.name] : e.target.value 
        });
    }

    onSubmit = (e, id) => {
        debugger
    //    Will do perform for submitting edit
    }

    render(){
        const { blogs, loading} = this.props.resume;
        const {  user, isAuthenticated } = this.props.auth;
        const itemsPerPage = 6; 
        let activeBlogs = blogs.slice (itemsPerPage * this.state.activePage - itemsPerPage, itemsPerPage * this.state.activePage);
        return(
            <div>

                {/* edit card dialog */}

                <EditBlog blogs={blogs} user={this.props.auth} 
                onTodoChange={this.onTodoChange}  {...this.state} toggle={this.toggle}
                onSubmit={this.onSubmit}/>

            </div> 

        ) 
   }
}

const mapStateToProps = (state) => ({
    resume: state.resume,
    auth: state.auth,
    loading: state.apiCallsInProgress > 0
});

export default connect(mapStateToProps, {getBlog, deleteBlog, updateBlog }) (Blogs);
// Edit.js

const EditBlog = ({ blogs, toggle, onTodoChange, onSubmit, ...state}) => {
    const itemsPerPage = 6; 
    let activeBlogs = blogs.slice (itemsPerPage * state.activePage - itemsPerPage, itemsPerPage * state.activePage);
    return( 
        <span>
            {activeBlogs.map(({ _id, blog_short_desc, blog_name, blog_desc, blog_image_link, blog_by_author }) => (
            <Modal 
                isOpen = {state.modal && state.requiredItem === _id}
                toggle = {()=>this.toggle(_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} value={blog_short_desc}/>
                            <Label for="blogName">Blog Name</Label>
                            <Input type="text" name="blog_name" id="blogName" placeholder="Update blog name"
                            onChange={onTodoChange} value={blog_name}/>
                            <Label for="desc1">Description </Label>
                            <Input type="textarea" name="blog_desc" id="desc1" placeholder="Update your blog"
                            onChange={onTodoChange} value={blog_desc}/>
                            <Label for="imageUrl">Image Url</Label>
                            <Input type="text" name="blog_image_link" id="imageUrl" placeholder="Update image url (Optional)"
                            onChange={onTodoChange} value={blog_image_link}/>
                            <Button
                                color="dark"
                                style={{marginTop: '2rem'}}
                                block
                            >Edit blog</Button>
                        </FormGroup>
                </Form>
                </ModalBody>
            </Modal>
            ))}
        </span>

    )
}

const mapStateToProps = state => ({
    resume: state.resume,
    auth: state.auth
})

export default connect(mapStateToProps, { updateBlog })(EditBlog);
// CurrentUI

我正在创建我的博客，用户可以在其中编辑他/她的博客。在这里，我将数据弹出到模态中以进行此编辑。但是到目前为止，我可以使用地图显示道具的数据。 ...

Answer 1

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