I have a Floating button (material ui) in my react project. I want to open "choose file" dialoge box whenever I click it. I am not getting any solution to do that. I tried doing this but didn't work. and I don't want to use jquery.
</div>
<input id="myInput" type="file" style="visibility:hidden" />
<FloatingActionButton className="floatingButton" backgroundColor='#293C8E' onClick ="$('#myInput').click();">
<ContentAdd />
</FloatingActionButton>
</div>
Can someone please tell me what exactly I need to do?
Basic example (does not include what to do with selected file):
<div>
<input id="myInput" type="file" ref={(ref) => this.upload = ref} style={{ display: 'none' }} />
<FloatingActionButton
className="floatingButton"
backgroundColor='#293C8E'
onClick={(e) => this.upload.click() }
>
<ContentAdd />
</FloatingActionButton>
</div>
So, your FloatingActionButton's onClick handler manually fires the click() handler of a hidden file upload control (input type="file"). A reference to the hidden upload control is obtained by putting a ref callback on it and storing that reference in "this.upload" (could also use DOM or jQuery to do that, but ref is preferred in React)
here is a working jsFiddle: https://jsfiddle.net/432yz8qg/58/
You can do the trick with the help of <label/> tag:
<label htmlFor='myInput'>
<input id="myInput" type="file" style={{visibility: 'hidden'}} />
<FloatingActionButton
className="floatingButton"
backgroundColor='#293C8E'
>
<ContentAdd />
</FloatingActionButton>
</label>
I solved this problem in a more React way than Jeff solution though my solution imply the use of multiple CSS rules.
I used a FlatButton with the props containerElement set to "label" :
const { FlatButton, SvgIcon, MuiThemeProvider, getMuiTheme } = MaterialUI;
class Example extends React.Component {
render() {
const buttonStyle = {
minWidth: '56px',
width: '56px',
minHeight: '56px',
height: '56px',
borderRadius: '28px',
};
return (
<div>
<FlatButton
containerElement="label"
backgroundColor='#293C8E'
style={buttonStyle}
>
<input type="file" style={{ display: 'none' }} />
</FlatButton>
</div>
);
}
}
const App = () => (
<MuiThemeProvider muiTheme={getMuiTheme() }>
<Example />
</MuiThemeProvider>
);
ReactDOM.render(
<App />,
document.getElementById('container')
);
<script src="https://unpkg.com/react#15.2.1/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/react-dom#15.2.1/dist/react-dom.js"></script>
<script src="https://rawgit.com/nathanmarks/3f5196f5973e3ff7807f2bab4e603a37/raw/f409f3bf5902c211b358a3ebe7b6cd366da551e8/mui-umd.js"></script>
<div id="container"></div>
More details here : https://stackoverflow.com/a/36262984/2590861
Related
I'm trying to implement a kind of table, which has an add button that opens a modal.
Inside the modal, I have the inputs that I want to update in the table, but using the ant design modal it has an ok button and a cancel button. How do I make the path to get the values? I'm having trouble understanding/writing this syntax. Can someone help me?
on the "onOk", i don't know how to write the function, tried creating a onSubmit(values) and console.log it but it doesn't show
Here's the code
function showModal(nome,colunas) {
setFormDisplay("");
setModal(!modal);
setFormName(nome);
setFormColumns(colunas);
}
function cancelModal() {
setFormDisplay("none");
setModal(false);
setFormName("");
setFormColumns([]);
}
<>
<div className="">
<CardsHost posts={nomes} />
</div>
<Modal
visible={modal}
onOk={}
title="Novo Prontuário"
onCancel={cancelModal}
style={{display:`${formDisplay}`}}
width={1000}
>
{formColumns.map((column,index) => (
<>
<div className="labelll">
<label key={`label-${index}`}>{column.title}</label>
{(column.key !=='proc' && column.key !== 'meds' )
? <Input key={`input-${index}`} style={{ width: "61.3%" }} />
: (column.key == 'proc' ) ? <div className="pesquisa-input"><Demo /></div>
: <div className="pesquisa-input"><PageComponentMeds /> </div>
}
</div>
{/*<div className="labelll">
<label> Data de Atendimento</label>
<DatePicker style={{ width: "61.3%" }} />
</div>
<div className="labelll">
<label> Nota </label>
<TextArea style={{ width: "61.3%" }} />
</div> */}
</>
))}
</Modal>
</>
);
}
The easiest way would be use to add a state variable for both of your input values. You can update them using the onChange callback provided by the antd components. On submit you use the state values to make your api call.
Make sure that you reset the variables on cancel and after a successful call.
When I use Form in modal of semantic-ui-react, it shows that error.
Warning: validateDOMNesting(…): cannot appear as a descendant
of
I know it is show if there are form in form.
Below is my code, there are no one. if i don't use modal, there are no error.
import { useState } from "react";
import { Helmet } from "react-helmet";
import { Button, Modal, Form } from "semantic-ui-react";
import { Body, Wrapper, Content, Article } from "../../Styles/Wrapper";
// eslint-disable-next-line import/no-anonymous-default-export
export default (company_id, company_secret, onSubmit) => {
const [open, setOpen] = useState(false);
return (
<Body>
<Wrapper>
<Helmet>
<title>juju</title>
</Helmet>
<Content>
<Article>
<Modal as={Form}
onClose={() => setOpen(false)}
onOpen={() => setOpen(true)}
open={open}
trigger={
<Button
style={{ marginBottom: 10, backgroundColor: "#FEE500" }}
size="large"
fluid
>
<span style={{ fontSize: 15 }}>begin</span>
</Button>
}
>
<Modal.Header>add</Modal.Header>
<Modal.Content>
<Form onSubmit={onSubmit}>
<Form.Group>
<Form.Input
placeholder="put id"
name="id"
{...company_id}
/>
<Form.Input
placeholder="put secret"
name="secret"
{...company_secret}
/>
<Form.Button content="Submit" />
</Form.Group>
</Form>
</Modal.Content>
</Modal>
</Article>
</Content>
</Wrapper>
</Body>
);
};
You cannot have a form inside a form. Remove as={Form} when rendering the Modal component. You should also fix the function arguments since the component receives a props object. You should destructure company_id, company_secret, and onSubmit.
export default ({ company_id, company_secret, onSubmit }) => {
// ...
}
And there are a few issues with the <Form.Input> components. You should pass them the value and onChange props. You could create a couple of state variables companyId and companySecret to manage the input states.
const [companyId, setCompanyId] = useState(company_id)
const [companySecret, setCompanySecret] = useState(company_secret)
<>
<Form.Input
name="id"
value={companyId}
onChange={(e) => setCompanyId(e.target.value)}
/>
<Form.Input
name="secret"
value={companySecret}
onChange={(e) => setCompanySecret(e.target.value)}
/>
</>
P.S. I would suggest using camelCase variables everywhere (unless you absolutely have to use snake_case) for consistency.
I'm trying to apply a <Fade /> to a block of code in the render but only if this.state.ContextNewJobFade is false.
I've read How do I conditionally wrap a React component? completely and still don't know how to implement it with my code. EDIT post solution: I believe this question is VERY similar to the one above but it uses a Fade wrapper instead of a href link.
Here's the block from the render:
<div>
{this.state.ContextNewJobFade === false ?
<Fade>
<Label className={styles.questionTitle1}>Text:</Label>
<br />
<div className={styles.questionDescription}>
Text
<br />
</div>
<br />
<TextField
name="txtContextNewJobCode"
multiline
resizable={false}
value={this.state.ContNewJobCode}
onChange={this._onContNewJobCodeChng}
/>
</Fade>
) : (
<div>
<Label className={styles.questionTitle1}>Some Text</Label>
<br />
<div className={styles.questionDescription}>
Text
<br />
</div>
<br />
<TextField
name="txtContextNewJobCode"
multiline
resizable={false}
value={this.state.ContNewJobCode}
onChange={this._onContNewJobCodeChng}
/>
</div>
);
As you can see I'm duplicating the code here and need a better solution.
Here's how i would refactor your components, hope it helps!
const FadeComponent = ({ fade, children }) =>
fade ? <Fade>{children}</Fade> : children;
const MyComponent = () => {
return (
<FadeComponent fade={this.state.ContextNewJobFade}>
<Label className={styles.questionTitle1}>Text:</Label>
<br />
<div className={styles.questionDescription}>
Text
<br />
</div>
<br />
<TextField
name='txtContextNewJobCode'
multiline
resizable={false}
value={this.state.ContNewJobCode}
onChange={this._onContNewJobCodeChng}
/>
</FadeComponent>
);
};
I was read some tutorial about this. They told me should using ref to do that.
But It's very general.
Here is my problem:
Basically in Header component include NavBar, SearchBar and ResultSearch component.
const Header = () => {
return (
<header className="ss_header">
<Navbar />
<SearchBar />
<ResultSearch />
</header>
);
};
And In SearchBar component. Whenever I focused on input text. It emit an event and display ResultSearch component by any way (changing style, or ...).
class SearchBar extends Component{
render() {
return (
<div className="search_bar">
<section className="search">
<div className="sub_media container">
<form method="GET" action="" id="search_form">
<Icon icon="search" />
<span className="autocomplete">
<input
className="search_input"
autoCorrect="off"
autoComplete="off"
name="query"
type="text"
placeholder="Search for a movie, tv show, person..." />
</span>
</form>
</div>
</section>
</div>
);
}
}
Style in ResultSearch component. I was set display: none.
.results_search { display: none; }
I think ResultSearch will receive an event from SearchBar and set back display: block for ResultSearch component. Is possible?
How can I handle that?
My Code here: https://codesandbox.io/s/3xv8xnx3z5
only you should convert Header component like following:
class Header extends Component {
state = {
focus: false
};
handleInputFocus = () => {
this.setState({ focus: true });
};
handleInputBlur = () => {
this.setState({ focus: false });
};
render() {
return (
<header className="ss_header">
<SearchBar
onFocus={this.handleInputFocus}
onBlur={this.handleInputBlur}
/>
{this.state.focus ? <ResultSearch /> : null}
</header>
);
}
}
and also in SearchBar component add following attributes to your input:
onFocus={this.props.onFocus}
onBlur={this.props.onBlur}
also, you should remove your CSS about result box.
And, you can see the updated code on the following sandbox:
https://codesandbox.io/s/mmj46xkpo9
Still not sure what you're trying to achieve.
This is the way you can handle visibility of result of the search. Let me know if this isn't what you're looking for.
https://codesandbox.io/s/7jvz31xr66
I am using semantic-ui-react's Form.Input, which wraps the input in two divs.
This means,
<Form.Input type='password' name='password' id='loginPassword'></Form.Input>
is rendered as follows:
<div class='field'>
<div class='ui fluid action left icon input'>
<input type='password' name='password' id='loginPassword' ...>
<button ...>
</div>
</div>
I would like to get the ref for the <input/> element, so that I can call focus().
My ref is set to the component when using ref='myRef'
ReactDOM.findDOMNode returns a DOM ref, but the ref is set to the outer div (with class='field').
How do I get a ref to the <input/> element?
BTW, I am using redux, although I don't think that matters
Form.Input is just a shorthand for some components that are wrapping an Input.
So behind the scenes this:
<Form.Input label='Enter Password' type='password' />
Is the same as this:
<Form.Field>
<label>Enter Password</label>
<Input type='password' />
</Form.Field>
semantic-ui-react supports the react ref API for Input, but make sure you are using the current ref API and not the old one:
<Input ref={ref => this.input = ref} />
running example:
const { Input, Button } = semanticUIReact; // import
class App extends React.Component {
onClick = () => this.input.focus();
render() {
return (
<div>
<Input ref={ref => this.input = ref} />
<Button onClick={this.onClick}>Focus</Button>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui-react#0.78.3/dist/umd/semantic-ui-react.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css"/>
<div id="root"></div>
As you're using findDOMnode (usually not advised), you're back into standard js, so this :
ReactDOM.findDOMNode(your ref).querySelector('input')
should work