javascript - 在创建/编辑表单上保持代码干燥

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 />组件。

有没有办法传递来 self 的子组件的引用，<Form /> ，对其父级，<Create /> ？

Answer 1

有很多引用!好消息，你真的根本不需要它们。作为一个非常非常普遍的规则，只有在与不“理解”React 的外部库(d3、Greensock、TinyMCE 等)交互时，才应该使用 refs。

在 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