我如何从 React Modal bootstrap 中获取价值？

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.onRegister(this.state.name);
}

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

我如何从 React Modal bootstrap 中获取价值？

How can I get value from react modal bootstrap?

modal-dialog

twitter-bootstrap

reactjs

bootstrap-4

reactstrap