作成/編集フォームにDRYコードを保存します

Question

フォームに作成と更新の両方に使用される入力がいくつかあります。私はそれらをコンポーネントにすることに決めました。

// used for CRU on the event record 
import React from 'react'; 

class Form extends React.Component { 
    render() { 
    return (
     <div className="slds-form"> 
     <div className="slds-form-element"> 
      <label className="slds-form-element__label">Assigned To</label> 
      <div className="slds-form-element__control"> 
      <input ref={(input) => this.assigned = input} type="text" className="slds-input" disabled/> 
      </div> 
     </div> 
     <div className="slds-form-element"> 
      <label className="slds-form-element__label">Related To</label> 
      <div className="slds-form-element__control"> 
      <input ref={(input) => this.related = input} type="text" className="slds-input" disabled/> 
      </div> 
     </div> 
     <div className="slds-form-element"> 
      <label className="slds-form-element__label">Location</label> 
      <div className="slds-form-element__control"> 
      <input ref={(input) => this.location = input} type="text" className="slds-input" /> 
      </div> 
     </div> 
     <div className="slds-form-element"> 
      <label className="slds-form-element__label">Event Start</label> 
      <div className="slds-form-element__control"> 
      <input ref={(input) => this.start = input} type="text" className="slds-input" /> 
      </div> 
     </div> 
     <div className="slds-form-element"> 
      <label className="slds-form-element__label">Event End</label> 
      <div className="slds-form-element__control"> 
      <input ref={(input) => this.end = input} type="text" className="slds-input" /> 
      </div> 
     </div> 
     <div className="slds-form-element"> 
      <label className="slds-form-element__label">Contact</label> 
      <div className="slds-form-element__control"> 
      <input ref={(input) => this.contact = input} type="text" className="slds-input" disabled/> 
      </div> 
     </div> 
     <button type="button" className="slds-button slds-button--neutral">Cancel</button> 
     <button type="submit" className="slds-button slds-button--brand">{this.props.buttonLabel}</button> 
     </div> 
    ); 
    } 
} 

export default Form; 

私は<Create />コンポーネントでこのコンポーネントを使用しようとしました。

// used for Create on the event record 
import React from 'react'; 
import Form from './Form'; 

class Create extends React.Component { 

    createEvent(e) { 
    console.log("createEvent() has fired."); 
    e.preventDefault(); 
    const event = { 
     assigned: this.assigned.value, 
     related: this.related.value, 
     location: this.location.value, 
     start: this.start.value, 
     end: this.end.value, 
     contact: this.contact.value 
    } 
    console.log(event); 
    } 

    render() { 
    return (
     <form onSubmit={(e) => this.createEvent(e)}> 
     <Form buttonLabel="Create" /> 
     </form> 
    ); 
    } 
} 

export default Create; 

私は私の<Create />コンポーネント上のボタンを作成してヒットしようとすると、私はエラー

Uncaught TypeError: Cannot read property 'value' of undefined 
    at Create.createEvent (webpack:///./src/components/Event/Create.js?:42:32) 
    at onSubmit (webpack:///./src/components/Event/Create.js?:59:27) 
    at Object.ReactErrorUtils.invokeGuardedCallback (webpack:///./~/react/lib/ReactErrorUtils.js?:70:16) 
    at executeDispatch (webpack:///./~/react/lib/EventPluginUtils.js?:89:21) 
    at Object.executeDispatchesInOrder (webpack:///./~/react/lib/EventPluginUtils.js?:112:5) 
    at executeDispatchesAndRelease (webpack:///./~/react/lib/EventPluginHub.js?:44:22) 
    at executeDispatchesAndReleaseTopLevel (webpack:///./~/react/lib/EventPluginHub.js?:55:10) 
    at Array.forEach (native) 
    at forEachAccumulated (webpack:///./~/react/lib/forEachAccumulated.js?:25:9) 
    at Object.processEventQueue (webpack:///./~/react/lib/EventPluginHub.js?:231:7) 

を取得し、私はその後、私の<Create />コンポーネントのコンソールをチェックして、refsは私<Form />コンポーネントに属し見て、ではありません。

その親、<Create />に、私の子コンポーネント、<Form />から引用文献を渡す方法はありますか？

Answer 1

これは多くのrefsです！良いニュース、あなたは本当にそれらを必要としません。非常に一般的な規則として、Reactを理解していない外部ライブラリ（d3、Greensock、TinyMCEなど）と対話している場合にのみ、refを使用してください。 uncontrolled方法でそれに取り組む

は次のように行うことができます。

const User = (props) => (
    <div> 
    <input name="foo" className="form-control" /> 
    <input name="foo2" className="form-control" /> 
    <button type="submit" className="btn btn-primary">{props.buttonLabel}</button> 
    </div> 
); 

class App extends React.Component { 

    constructor(props) { 
    super(props); 
    this.onChange = this.onChange.bind(this); 
    this.onSubmit = this.onSubmit.bind(this); 
    } 

    onChange(e) { 
    this.setState({ 
     [e.target.name]: e.target.value, 
    }); 
    } 

    onSubmit(e) { 
    e.preventDefault(); 
    console.log(this.state); 
    } 

    render() { 
    return (
     <div className="container"> 
     <br /> 
     <form onChange={this.onChange} onSubmit={this.onSubmit}> 
      <User buttonLabel="Create"/> 
     </form> 
     </div> 
    ); 
    } 
}; 


ReactDOM.render(<App />, document.getElementById('app')); 

Codepen例： http://codepen.io/cjke/pen/zNXxga?editors=0010