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

Question

如何从引导模式中获得价值？我正在使用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>
  );
}