Question

我花了一天多时间研究一个非常简单的解决方案。我正在使用react-bootstrap。

我的表格看起来像这样：

modal_form.js.jsx

...
render: function() {
  var Modal = require('react-bootstrap').Modal;
  var InputField = app.InputField
  var formElementsCollection= this.props.formElements.map((formElement, i) => {
    return (
      <InputField
        inputControlID="myInput"
        inputLabel="Input Label"
        placeholderText="My Placeholder"
        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>
  );
}
...

input_field.js.jsx

...
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}
      >
      <ControlLabel>{this.props.inputLabel}</ControlLabel>
      <FormControl
        type="text"
        value={this.state.value}
        placeholder={this.props.placeholderText}
        onChange={this.handleChange}
      />
      <FormControl.Feedback />
    </FormGroup>
  );
}
...

正如您所看到的，我在我的ModalForm父级中映射了一个值数组，并为数组的每个映射值创建了一个InputField子级。在InputField子组件中，然后我通过使用'onChange'方法回调来分配每个元素的值状态。

我正在努力理解的是，如何在我的父组件中获取每个InputField子组件的值？由于我使用的是react-bootstrap并且它是FormControl组件，因此我没有'ref'属性来调用。我不确定这是否需要明确定义，但由于react-bootstrap文档没有为此属性提供，我认为必须有更好的方法来获取每个值？这个假设我错了吗？

获取React Bootstrap FormControl的输入值

0 个答案: