リアクション - 事前入力フォーム

Question

以前に作成したブログをユーザーが編集できるようにフォームを事前入力する必要があります。私はReactでこれを行うベストプラクティスの方法を探しています。私は現在、小道具を介してコンポーネントに値を渡しています。次に、州のプロパティを小道具のプロパティと同じに設定していますが、これは反パターンであると読んでいます。私は「真実の源」を理解しています。しかし、それを行うより良い方法は何ですか？私はむしろredux形式を使用しないでください。以下は私のタイトルコンポーネントです。その下に、私はそれを親から呼び出す方法です。これはすべて機能しますが、状態プロパティを小道具プロパティに設定することを避けるために、より良い方法がありますか？いずれかの検証：親から

import React, { Component, PropTypes} from 'react'; 

export default class DocumentTitle extends Component{ 
    constructor(props) { 
     super(props); 
     this.state = {inputVal:this.props.publication.document_title} 
     this.handleChange = this.handleChange.bind(this) 
    } 

    handleChange(event) { 
    this.setState({inputVal: event.target.value}); 
    } 

    componentWillReceiveProps(nextProps){ 
    this.setState({inputVal: nextProps.publication.document_title}) 
    } 

    render(){ 
    return (
     <div > 
     <label>Title</label> 
     <div> 
      <input onChange={this.handleChange} id="doc_title" type="text" value={this.state.inputVal}/> 
     </div> 
     </div> 
    )  
    } 
} 

コール：パブリケーションが親で維持されている場合は、他の理由がある場合を除き

<DocumentTitle publication={this.props.publication} /> 

Answer 1

、その後、状態を維持する必要は、ありません。

入力が制御されていないコンポーネントである可能性があります。入力のonBlurを使用して親を更新することができます。

<input 
    onBlur={e => this.props.onTitleChange(e.target.value)} 
    id="doc_title" 
    type="text" 
    defaultValue={this.props.publication.document_title} /> 

親コンポーネントはパブリケーションの状態を更新する必要があります。

<DocumentTitle 
    publication={this.state.publication} 
    onTitleChange={this.handleTitleChange} />