twitter-bootstrap - 我如何从 react 模式 Bootstrap 中获得值(value)？

Question

如何从 Bootstrap 模式中获得值(value)？我正在使用 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

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

这是我简化的示例，以突出显示您需要进行的更改。 Modal 控制 Input 的状态但是当您按下按钮时，本地 reg()函数被调用，该函数又调用 register()来自父级的函数，因为它作为名为 onRegister 的 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>
  );
}