Javascript 从React Bootstrap FormControl动态检索输入值_Javascript_Reactjs_React Bootstrap

Javascript 从React Bootstrap FormControl动态检索输入值

javascript reactjs

Javascript 从React Bootstrap FormControl动态检索输入值,javascript,reactjs,react-bootstrap,Javascript,Reactjs,React Bootstrap,我正在尝试创建DynamicReact组件，使我能够轻松地调用代码任何部分中的组件。这种组件的一个示例是模态形式。我正在使用，我试图坚持使用他们预定义的组件，但我遗漏了一些东西我有一个模态表单组件，它从作为道具传入的数组中动态创建输入我的组件层次结构如下所示：Crud>ModalForm>InputField 这是我的密码： crud.js.jsx ... createModalSubmit(form) { console.log(form); $.ajax({ url:

我正在尝试创建DynamicReact组件，使我能够轻松地调用代码任何部分中的组件。这种组件的一个示例是模态形式。我正在使用，我试图坚持使用他们预定义的组件，但我遗漏了一些东西

我有一个模态表单组件，它从作为道具传入的数组中动态创建输入

我的组件层次结构如下所示：Crud>ModalForm>InputField

这是我的密码：

crud.js.jsx

...
createModalSubmit(form) {
  console.log(form);

  $.ajax({
    url: '/products.json',
    type: 'POST',
    data:  {product: {
      name: name
    }},
    success: (product) => {
      this.setState({
        product: {
          name: ''
        },
        errors: {},
        showModal: false
      });
    },
    error: (product) => {
      this.setState({errors: product.responseJSON.errors})
    }
  });
},

render: function() {
  var ModalForm = app.ModalForm;
  return (
    <div>
      <ModalForm
        showModal={this.state.showModal}
        headerText="My Modal"
        formElements= {[{"name":"name"}]}
        unloadModal={this.unloadModal}
        buttonText="Add"
        onClickHandler={this.createModalSubmit}
        formErrors={this.state.errors}
        />
    </div>
  );
}
...

...
render: function() {
    var Modal = require('react-bootstrap').Modal;
    var InputField = app.InputField

    var formElementsCollection= this.props.formElements.map((formElement, i) => {

      return (
        <InputField
          inputControlID={formElement.name}
          inputLabel={formElement.name}
          key={i}
          />
      )
    });

    return (
      <Modal
        keyboard={true}
        show={this.props.showModal}
        onHide={this.props.unloadModal}
        >
        <Modal.Header closeButton>
          <h3>
            {this.props.headerText}
          </h3>
        </Modal.Header>
        <Modal.Body>
          <form>
            {formElementsCollection}
            <button type="button" className="btn btn-info btn-fill pull-right" onClick={() => this.props.onClickHandler(this)}>{this.props.buttonText}</button>
          </form>
          <div className="clearfix"></div>
        </Modal.Body>
      </Modal>
    );
  }

});
...

...
getValidationState() {
  const length = this.state.value.length;
  if (length > 10) return 'success';
  else if (length > 5) return 'warning';
  else if (length > 0) return 'error';
},

handleChange(e) {
  this.setState({ value: e.target.value });
},

render: function() {
  var FormGroup = require('react-bootstrap').FormGroup;
  var ControlLabel = require('react-bootstrap').ControlLabel;
  var FormControl = require('react-bootstrap').FormControl;
  return (
    <FormGroup
        controlId={this.props.inputControlID}
        validationState={this.getValidationState()}
      >
      <ControlLabel>{this.props.inputLabel}</ControlLabel>
      <FormControl
        type="text"
        value={this.state.value}
        placeholder={this.props.placeholderText}
        onChange={this.handleChange}
      />
      <FormControl.Feedback />
    </FormGroup>
  );
}
...

。。。
createModalSubmit（表单）{
控制台日志（表格）；
$.ajax({
url:“/products.json”，
键入：“POST”，
数据：{产品：{
姓名：姓名
}},
成功：（产品）=>{
这是我的国家({
产品：{
名称：“”
},
错误：{}，
showModal:错误
});
},
错误：（产品）=>{
this.setState（{errors:product.responseJSON.errors}）
}
});
},
render:function（）{
var ModalForm=app.ModalForm；
返回(
);
}
...

modal_form.js.jsx

...
createModalSubmit(form) {
  console.log(form);

  $.ajax({
    url: '/products.json',
    type: 'POST',
    data:  {product: {
      name: name
    }},
    success: (product) => {
      this.setState({
        product: {
          name: ''
        },
        errors: {},
        showModal: false
      });
    },
    error: (product) => {
      this.setState({errors: product.responseJSON.errors})
    }
  });
},

render: function() {
  var ModalForm = app.ModalForm;
  return (
    <div>
      <ModalForm
        showModal={this.state.showModal}
        headerText="My Modal"
        formElements= {[{"name":"name"}]}
        unloadModal={this.unloadModal}
        buttonText="Add"
        onClickHandler={this.createModalSubmit}
        formErrors={this.state.errors}
        />
    </div>
  );
}
...

...
render: function() {
    var Modal = require('react-bootstrap').Modal;
    var InputField = app.InputField

    var formElementsCollection= this.props.formElements.map((formElement, i) => {

      return (
        <InputField
          inputControlID={formElement.name}
          inputLabel={formElement.name}
          key={i}
          />
      )
    });

    return (
      <Modal
        keyboard={true}
        show={this.props.showModal}
        onHide={this.props.unloadModal}
        >
        <Modal.Header closeButton>
          <h3>
            {this.props.headerText}
          </h3>
        </Modal.Header>
        <Modal.Body>
          <form>
            {formElementsCollection}
            <button type="button" className="btn btn-info btn-fill pull-right" onClick={() => this.props.onClickHandler(this)}>{this.props.buttonText}</button>
          </form>
          <div className="clearfix"></div>
        </Modal.Body>
      </Modal>
    );
  }

});
...

...
getValidationState() {
  const length = this.state.value.length;
  if (length > 10) return 'success';
  else if (length > 5) return 'warning';
  else if (length > 0) return 'error';
},

handleChange(e) {
  this.setState({ value: e.target.value });
},

render: function() {
  var FormGroup = require('react-bootstrap').FormGroup;
  var ControlLabel = require('react-bootstrap').ControlLabel;
  var FormControl = require('react-bootstrap').FormControl;
  return (
    <FormGroup
        controlId={this.props.inputControlID}
        validationState={this.getValidationState()}
      >
      <ControlLabel>{this.props.inputLabel}</ControlLabel>
      <FormControl
        type="text"
        value={this.state.value}
        placeholder={this.props.placeholderText}
        onChange={this.handleChange}
      />
      <FormControl.Feedback />
    </FormGroup>
  );
}
...

。。。
render:function（）{
var Modal=require（'react-bootstrap'）。Modal；
var InputField=app.InputField
var formelementscolection=this.props.formElements.map（（formElement，i）=>{
返回(
)
});
返回(
{this.props.headerText}
{formElementsCollection}
this.props.onClickHandler（this）}>{this.props.buttonText}
);
}
});
...

input_field.js.jsx

...
createModalSubmit(form) {
  console.log(form);

  $.ajax({
    url: '/products.json',
    type: 'POST',
    data:  {product: {
      name: name
    }},
    success: (product) => {
      this.setState({
        product: {
          name: ''
        },
        errors: {},
        showModal: false
      });
    },
    error: (product) => {
      this.setState({errors: product.responseJSON.errors})
    }
  });
},

render: function() {
  var ModalForm = app.ModalForm;
  return (
    <div>
      <ModalForm
        showModal={this.state.showModal}
        headerText="My Modal"
        formElements= {[{"name":"name"}]}
        unloadModal={this.unloadModal}
        buttonText="Add"
        onClickHandler={this.createModalSubmit}
        formErrors={this.state.errors}
        />
    </div>
  );
}
...

...
render: function() {
    var Modal = require('react-bootstrap').Modal;
    var InputField = app.InputField

    var formElementsCollection= this.props.formElements.map((formElement, i) => {

      return (
        <InputField
          inputControlID={formElement.name}
          inputLabel={formElement.name}
          key={i}
          />
      )
    });

    return (
      <Modal
        keyboard={true}
        show={this.props.showModal}
        onHide={this.props.unloadModal}
        >
        <Modal.Header closeButton>
          <h3>
            {this.props.headerText}
          </h3>
        </Modal.Header>
        <Modal.Body>
          <form>
            {formElementsCollection}
            <button type="button" className="btn btn-info btn-fill pull-right" onClick={() => this.props.onClickHandler(this)}>{this.props.buttonText}</button>
          </form>
          <div className="clearfix"></div>
        </Modal.Body>
      </Modal>
    );
  }

});
...

...
getValidationState() {
  const length = this.state.value.length;
  if (length > 10) return 'success';
  else if (length > 5) return 'warning';
  else if (length > 0) return 'error';
},

handleChange(e) {
  this.setState({ value: e.target.value });
},

render: function() {
  var FormGroup = require('react-bootstrap').FormGroup;
  var ControlLabel = require('react-bootstrap').ControlLabel;
  var FormControl = require('react-bootstrap').FormControl;
  return (
    <FormGroup
        controlId={this.props.inputControlID}
        validationState={this.getValidationState()}
      >
      <ControlLabel>{this.props.inputLabel}</ControlLabel>
      <FormControl
        type="text"
        value={this.state.value}
        placeholder={this.props.placeholderText}
        onChange={this.handleChange}
      />
      <FormControl.Feedback />
    </FormGroup>
  );
}
...

。。。
getValidationState（）{
常量长度=this.state.value.length；
如果（长度>10）返回“成功”；
否则，如果（长度>5）返回“警告”；
否则如果（长度>0）返回“错误”；
},
手变（e）{
this.setState（{value:e.target.value}）；
},
render:function（）{
var FormGroup=require（'react-bootstrap'）。FormGroup；
var ControlLabel=require（'react-bootstrap'）。ControlLabel；
var FormControl=require（'react-bootstrap'）。FormControl；
返回(
{this.props.inputLabel}
);
}
...

在切换到react引导组件之前，当我仍然显式地为我需要的每个单独的模式创建单独的表单时，我会显式地调用每个输入元素的“ref”属性。从父元素动态检索子元素值的最佳方法是什么