我如何从反应模式引导中获得价值？

Posted 2023-03-23

【中文标题】我如何从反应模式引导中获得价值？

【英文标题】：How can I get value from react modal bootstrap?

【发布时间】：2017-11-08 10:26:33

【问题描述】：

如何从引导模式中获取价值？我正在使用reacstraphttps://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,
;

它显示模态：

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

【参考方案1】：

您可以使用作为道具从父级发送到模态的函数将值发送回。

这是我简化的示例，以突出您需要进行的更改。 Modal 控制Input 的状态，但是当您点击按钮时，会调用本地reg() 函数，该函数又会从父级调用register() 函数，因为它作为名为@9​​87654324@ 的prop 传递下来。我们将 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>
  );

【讨论】：

this.props.onRegister ?