Javascript 在创建/编辑表单时保持代码干燥

我的表单中有一些用于创建和更新的输入。我决定把它们做成一个组件

// 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;

// 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;

然后，我检查控制台并查看

ref

是否属于我的

组件，而不是我的

组件

// 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;

// 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;

---

是否有方法将引用从我的子组件

传递到其父组件

？

这是大量的

引用！好消息，你根本不需要它们。作为一条非常普遍的规则，只有在与不“理解”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'));

const User=（道具）=>(
{props.buttonLabel}
);
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onChange=this.onChange.bind（this）；
this.onSubmit=this.onSubmit.bind（this）；
}
onChange（e）{
这是我的国家({
[e.target.name]：e.target.value，
});
}
提交（e）{
e、 预防默认值（）；
console.log（this.state）；
}
render（）{
返回(


);
}
};
render（
您可以向下传递一个方法（从父级传递到子级），该方法接受一个变量（对象将是最佳的）然后以某种方式在家长中使用它。@A.Lau我不知道你可以这样做。你能分享一个链接吗？我通过观看youtube视频，特别是LearnCode.academy了解我的反应。可能想查看一下。我想他们在其中一个视频中向孩子传递了一个方法。那么发生的事情是你将家长方法传递给孩子子对象，子对象然后调用props方法，然后父对象使用该方法。如果在
const User
中使用props，该方法将如何工作？我收到一个错误“正在将文本类型的非受控输入更改为受控。输入元素不应从非受控切换为受控（反之亦然）。决定在组件的使用寿命内使用受控或非受控输入元素。“这是否意味着它需要自己的状态？