Reactで制御された入力を設定する

Question

現在、Reactでフォームを作成しています。オブジェクトのフィールドをプリフィルするためのベストプラクティスが何であるか不思議です。

Warning: `value` prop on `input` should not be null. Consider using the 
empty string to clear the component or `undefined` for uncontrolled  
components. 

はどこ空を提供するために、適切な場所である：this.state.resource.emailがnullまたは未定義の場合、私は制御コンポーネントに値としてそれらを提供したくない反応するので

import React, { Component } from 'react' 

class EditResourceForm extends Component { 
    constructor (props) { 
    super(props) 

    this.state = { 
     resource: props.resource 
    } 
    } 

    handleFieldChanged (e) { 
    // update state 
    } 

    render() { 
    return (
     <input 
     type="text" 
     value={this.state.resource.email} 
     onChange={::this.handleFieldChanged} /> 
    ) 
    } 
} 

私は、問題が発生しています文字列をnull値のフォールバックとして使用しますか？これは、親コンポーネントのコンストラクタメソッドで行う必要がありますか？ nullの値を持つ可能性があるすべての属性に対して、これを明示的に行う必要を避ける方法はありますか？

Answer 1

defaultValue propを使用して初期値を設定することができます。

<input 
    type="text" 
    defaultValue={this.state.resource.email ? this.state.resource.email : ""} 
    onChange={this.handleFieldChanged} /> 

制御されていないコンポーネント対制御については、この偉大なドキュメントをチェックアウト：私の知る限り、これを自動的に設定する方法はありません知っているように

constructor (props) { 
    super(props) 

    this.state = { 
     resource: props.resource || {} 
    } 
    } 

：私は考えることができるhttps://facebook.github.io/react/docs/uncontrolled-components.html

Answer 2

最も簡単な方法を値はnullではありませんが、もしあれば、私はそれをお勧めしません、良いコードは自明です。

EDIT 1

これはまだ十分ではない場合、他のオプションは、直反応の文書から、しかし、uncontrolled componentsを使用している：

制御されていない成分がのソースを保持しているのでDOM内の真実 制御されていないコンポーネントを使用すると、ReactとNon-Reactのコードを統合する方が簡単な場合があります。 あなたがすばやく汚れたがっている場合は、コードが少し少なくなることもあります。それ以外の場合は、通常、制御されたコンポーネント を使用する必要があります。

EDIT 2

ドキュメントに提供されているコードはので、ここでは、少し複雑なようで、私はそれを行うだろうかの抜粋です：

<input type="text" onChange={(e, val) => {this.setState({email: val})}} />