在創建/編輯表單上保留代碼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) 

我再檢查控制檯，看到了refs屬於我的<Form />組件，而不是我的<Create />組件。

有沒有辦法從我的子組件，<Form />通過裁判，其母公司，<Create />？

Answer 1

這是很多refs！好消息是，你根本不需要它們。作爲一個非常普遍的規則，如果您正在與不瞭解React（d3，Greensock，TinyMCE等）的外部庫進行交互，則應該只使用ref。

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例如：

在uncontrolled的方式應對它可以像做 http://codepen.io/cjke/pen/zNXxga?editors=0010