2017-08-16 57 views
0

我需要将道具传递给我的初始状态以编辑窗体(因为我希望窗体的值等于状态),但我无法让它工作。由于它首先加载一个空的道具,所以组件不会将道具给予initialState,我认为是由于createContainer。我尝试了很多东西(componentDidMount,WillMount,WillReceiveProps ...),但没有成功。代码如下,任何想法帮助?反应/流星 - 来自道具的this.state得到undefined

import React from 'react'; 
import PropTypes from 'prop-types'; 
import { Meteor } from 'meteor/meteor'; 
import moment from 'moment'; 
import { createContainer } from 'meteor/react-meteor-data'; 

import { Blogposts } from './../api/blogposts'; 

export class BlogpostEditItem extends React.Component { 

constructor(props){ 
    super(props); 
    this.state = { 
     title: this.props.blogpost.title, 
     body: this.props.blogpost.body 
    } 
} 

handleBodyChange(e) { 
    const body = e.target.value; 
    this.setState({ body }); 
} 

handleTitleChange(e) { 
    const title = e.target.value; 
    this.setState({ title }); 
} 

onSubmit(e) { 
    e.preventDefault(); 
    this.props.call('blogposts.update', this.props.blogpost._id, this.state.title, this.state.body,); 
} 

renderEditForm() { 
    return(
     <div> 
      <input onChange={this.handleTitleChange.bind(this)} value={this.state.title} placeholder="Title" type="text"/> 
      <textarea onChange={this.handleBodyChange.bind(this)} value={this.state.body} placeholder="Body"></textarea> 
      <button onClick={this.onSubmit.bind(this)}>Submit Blogpost</button> 
     </div> 
    ) 
} 

render() { 
    return (
     <div> 
      { this.props.blogpost ? this.renderEditForm() : 'Pas de post' } 
     </div> 
    ); 
} 
} 

export default createContainer(({params}) => { 
    Meteor.subscribe('blogposts'); 

    return { 
     blogpost: Blogposts.findOne(params.id), 
     call: Meteor.call 
    } 
}, BlogpostEditItem) 

我也试图通过道具为默认值,并保持状态值,但它不允许有两个窗体上。任何想法我能如何解决我的问题? 在此先感谢。

回答

1

您可以通过访问props组件propsthis.props

constructor(props){ 
 
    super(props); 
 
    this.state = { 
 
     title: props.blogpost.title, 
 
     body: props.blogpost.body 
 
    } 
 
}

+0

我现在感觉非常惭愧:d非常感谢队友! – Ivo

+0

@Ivo:如果您可以将它标记为答案,那就太好了:) –

+0

当然,完成!再次感谢 – Ivo