Сохраните код 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! Хорошие новости, вы действительно им не нужны. Как очень общее правило, вы должны использовать только refs, если вы взаимодействуете с внешней библиотекой, которая не «понимает» React (d3, Greensock, TinyMCE и т. Д.).

Отбор его в 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