如何從反應模態引導中獲得價值？

Question

如何從bootstrap模態獲得價值？我使用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, 
}; 

它顯示模式：

但是我怎樣才能得到我輸入的模態值到我的頁面調用模態？提前致謝。

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> 
); 
}