Question

如何从bootstrap模态中获取值？我正在使用reacstrap https://github.com/reactstrap

这是我调用模态的页面

import { ButtonGroup, Button, Input, Row, Col } from 'reactstrap';
import RegisterLookup from '../lookup/RegisterLookup';

<RegisterLookup
  isOpen={this.state.register}
  toggle={this.toggleRegister}
  className={''}
/>

这是我的模态组件：

  register() {
    console.log("da")
  }

render() {
    return (
      <div>
        <Modal isOpen={this.props.isOpen} toggle={this.props.toggle} className={this.props.className} size="lg">
          <ModalHeader toggle={this.props.toggle}>Register</ModalHeader>
          <ModalBody>
            <div className="row mb-2">
              <div className="col-sm-12">
                <Row>
                  <Col md="6" xs="12">
                    <FormGroup row>
                      <Label sm="4">Enter your name <span className="text-danger">*</span></Label>
                      <Col>
                        <Input />
                      </Col>
                    </FormGroup>
                  </Col>
                </Row>
              </div>
            </div>

          </ModalBody>
          <ModalFooter>
            <Button className="pull-right" type="button" color="primary" onClick={() => { this.register(); }}>
              <span className="hidden-xs-down">Register </span>
            </Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

RegisterLookup.defaultProps = {
  isOpen: PropTypes.bool,
  toggle: PropTypes.func,
  className: PropTypes.string,
};

RegisterLookup.propTypes = {
  isOpen: PropTypes.bool,
  toggle: PropTypes.func,
  className: PropTypes.string,
};

它显示模态：

但是如何才能将我在模态中输入的值输入到调用模态的页面中？提前谢谢。

Answer 1

您可以将您作为道具发送的功能从父母发送回模态。

以下是我简化的示例，以突出显示您需要进行的更改。 Modal控制Input的状态，但是当你点击按钮时，会调用本地reg()函数，而该函数又从父函数调用register()函数，因为它被传递为道具叫onRegister。我们将name作为参数传递给该函数调用。

请注意，我还添加了您没有的nameChange()功能。只要Input的值发生变化（例如通过按键），就会调用此函数并更新本地state。

<强>父：

register(name) {
  console.log(name);
}


render() {
  return(
    <RegisterLookup onRegister={this.register} />
  );
}

<强>模态：

nameChange = (e) => {
  this.setState({name: e.target.value});
}

reg = () => {
  this.props.register(this.state.name);
}

render() {
  return(
    <Modal>
      Enter your name: <Input onChange={this.nameChange} />
      <Button onClick={this.reg}>Register</Button>
    </Modal>
  );
}

如何从反应模态引导程序中获取价值？

1 个答案: