I am using ANTD React UI library.
<Modal
width="1100px"
centered
footer={null}
title={
<div className="d-flex align-items-center">
<div className="flex-grow-1">Record Profiles</div>
<div className="mr-4">
<Button
htmlType="submit"
type="primary"
onClick={() =>{this.SaveData(this.form.getFieldValue())}}
icon={<SaveOutlined />}
className="save_btn"
loading={this.state.saving}>
</Button>
<Button
onClick={() => { this.props.onCancel() }}
htmlType="button"
type="primary"
className="cancel_btn ml-2"
icon={<CloseCircleOutlined />}>
</Button>
</div>
</div>
}
visible={true}
closable={false}
okText="Yes"
cancelText="No"
maskClosable={false}
>
<Form
autoComplete="off"
layout="horizontal"
ref={(r) => this.form = r}
initialValues={this.props.record}
onFinish={this.SaveData}
>
.
.
.
</Form>
</Modal>
I want to call the save and close buttons on top of the side of the title. It is displaying correctly, but due to outside form functionalities don't work because the form values don't get outside. Is there any method to get the values outside or form submit?
Related
Based on this code snippet, I would like to reach and trigger the add property outside of the form. Any idea how can I do it?
<Form form={form} initialValues={initialValues} onFinish={onSubmit}>
<Form.List>
{(fields, { add, remove }) => (
<div>
{fields.map(field => (
<Form.Item {...field}>
<Input />
</Form.Item>
))}
</div>
)}
</Form.List>
// I don't want use this button here, inside the form list.
// I want invoke the add function from outside.
<Button type="link" onClick={() => add()}>
Add
</Button>
</Form>
// Or maybe from here
<Button type="link" onClick={() => add()}>
Add
</Button>
I'm trying to use ui headless radio-group
as button group so I want all my button
in a single column and multiple rows
but with this code
<div className="h-40 bg-red-300">
<RadioGroup value={selected} onChange={setSelected}>
<RadioGroup.Label>Options</RadioGroup.Label>
<div className="flex gap-3">
{options.map((option) => (
<RadioGroup.Option value={option} key={option}>
{({ checked }) => (
<button type="button" className={checked ? 'bg-blue-200 relative' : 'relative'}>
{option}
</button>
)}
</RadioGroup.Option>
))}
</div>
</RadioGroup>
</div>
all the buttons disappear.
What's the problem?
Worked it out with
<button type="button" className={`relative z-50 ${checked ? 'bg-blue-200' : ''}`}>
{option}
</button>
I have these two buttons inside my Formik form. Issue is when I hit enter it is clicking on my "Back" button despite it does not have type="submit".
<Formik
initialValues={initialState}
validationSchema={validationSchema}
onSubmit={handleSubmit}
>
{({ errors, touched, handleChange, setFieldValue, values }) => (
<Form>
<div className="field-block field-items mb-4">
<label>
Title <span className="required">*</span>
</label>
<div className="input-block">
<Field
className={touched.title && errors.title ? "error" : ""}
name="title"
type="text"
placeholder="Add a title"
/>
</div>
</div>
<div className="col-md-6">
<div className="button-container large-btn text-md-end text-center">
<button onClick={backFunction} className="btn-s-one">
Back
</button>
<button type="submit" className="btn-s-one fill ms-2">
Continue
{props.loder == false ? (
""
) : (
<Spin
size="large"
indicator={
<LoadingOutlined
style={{ fontSize: 50, color: "#000", marginLeft: 50 }}
spin
/>
}
className="loader__full"
></Spin>
)}
</button>
</div>
</div>
</Form>
)}
</Formik>;
Form Buttons in React.js are submit buttons by default. You need to change your back button code by the following.
<button type="button" onClick={backFunction} className="btn-s-one">
Back
</button>
Hey I have a main route /admin/influencers in my react app. And when I reach this path I want to display a tab button so user can switch to /admin/influencers/active and /admin/influencers/invited for example.
here is my implementation:
return (
<>
<div className="header pb-8 pt-5 pt-md-8">
<Container fluid>
<Card className="tab-container" fluid={true}>
<CardBody className="card-body">
<ButtonGroup className="button-group">
<Button size="lg" outline color="warning" onClick={() => setSelectedTab(1)} active={rSelected === 1}>Active</Button>
<Button size="lg" outline color="warning" onClick={() => setSelectedTab(2)} active={rSelected === 2}>Invited</Button>
<Button size="lg" outline color="warning" onClick={() => setSelectedTab(3)} active={rSelected === 3}>New Verification Request</Button>
</ButtonGroup>
<img onClick={toggle} className="add-influencer" src={Add} alt="add" width="40px" height="40px" />
</CardBody>
</Card>
</Container>
<Switch>
<Route
path="/admin/influencers/active?page=1"
component={ActiveInfluencer}
/>
</Switch>
</div>
<AddInfluencerModal toggle={toggle} isOpen={modal} inviteInfluencers={handleInviteInfluencers} updateInvitedInfluencers={fetchInvitedInfluencers}/>
</>
);
but this isn't displaying anything. Any help would be aprreciated.
Thank you
I am passing data to the modal from a parent component. I show the modal on a button click. But the modal body doesn't contain the desired data. It appends all the data inside the body instead of showing only the necessary content.
This is the parent component
{this.state.response.map((value, id) => {
return (
<div className="col-md-3 file-card-viewSection">
<Button
id={id+1}
onClick={(e) => {this.setState({ showDocumentsModal: true })}}>
<i className="fas fa-eye"></i>
</Button>
</div>
<ViewDocumentDetailsModal
show={this.state.showDocumentsModal}
onHide={this.modalClose.bind(this)}
documentdata={value.result} />
);
})}
This is the child component containing the bootstrap modal
class viewDocumentDetailsModal extends Component {
render() {
console.log(this.props)
return (
<Modal
{...this.props}
size="lg"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Modal heading
</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>Centered Modal</h4>
<ReactJson src={this.props.documentdata} />
</Modal.Body>
<Modal.Footer>
<Button onClick={this.props.onHide}>Close</Button>
</Modal.Footer>
</Modal>
);
}
}
When i click on the button it displays both modals at once. I am not able to figure out why. Kindly help me out. Thanks.
This is how I get the output
This is the entire parent component
{this.state.response.map((value, id) => {
return(
<div>
<Card className="mb-4">
<Card.Body className="row file-card-row">
<div className="col-md-1 file-card-index">
{id+1}
</div>
<div className="col-md-4 file-card-filename">
{value.result.Filename}
</div>
<div className="col-md-4 file-card-status">
{value.result.Status}
</div>
<div className="col-md-3 file-card-viewSection">
<Button id={id+1} onClick={(e) => {this.setState({ showDocumentsModal: true, modalOpened: id })}}>
<i className="fas fa-eye"></i>
</Button>
</div>
</Card.Body>
</Card>
</div>
);
})}
<ViewDocumentDetailsModal
show={this.state.showDocumentsModal}
onHide={this.modalClose.bind(this)}
documentdata={this.state.response[this.state.modalOpened].result}
/>
</div>
First, I've tried to adjust the indentation of your code (the edit has to be accepted first), but it seems to me that, in the first piece of code, you return a <div> element and <ViewDocumentDetailsModal> element without any parent component: in React that should not be possible (you should always have a single element returned, if you are in the render() method.
Anyways, I think that you retrieve more than one Modal because <ViewDocumentDetailsModal> element is returned inside the this.state.response.map() callback: this way, for each response you return a different Modal.
If in this.state.response you have data for different Modal, but you want to display just one of them, you need to have a different number property in the state, like this.state.modalOpened, in which you keep saved the index of the modal data you want to display.
Then, in the return() method, you should write something like this:
<>
{this.state.response.map((value, id) => {
return (
<div className="col-md-3 file-card-viewSection">
<Button
id={id+1}
onClick={(e) => {this.setState({ showDocumentsModal: true, modalOpened: id })}}>
<i className="fas fa-eye"></i>
</Button>
</div>
);
})}
<ViewDocumentDetailsModal
show={this.state.showDocumentsModal}
onHide={this.modalClose.bind(this)}
documentdata={this.state.response[this.state.modalOpened].result} />
</>