I am creating a file uploader using react. I want to hide the default file input element and trigger it when user click on a div.
<div style={{position:"relative",width:"500px",height:"300px",background:"gray",marginLeft:"auto",marginRight:"auto",border:"2px
dotted white"}}
onClick={this.clickOnFakeUploader}
>
<div style={{float:"left",marginTop:"100px",width:"100%"}}>
<h4 style={{color:"white",marginLeft:"auto",marginRight:"auto"}}>Drag & Drop Files Here!
</h4>
</div>
</div>
<label className="btn btn-default" style={{display:"none"}}>
<input ref={this.fileUploader} type="file" multiple onChange={this.selectFiles} />
</label>
this.fileUploader = React.createRef();
this.clickOnFakeUploader = () =>{
this.fileUploader.click();
}
I am getting TypeError: this.fileUploader.click is not a function error.
this.fileUploader.current.click()
you need to address it with current
Related
I am using React useForm hook to submit data from my form. The requirement is the user should see the sample data in a preview div before he submits. How can i get the value from input text boxes and display it in a div next to the input. In the documentation there is getValue method can that be used?
<form>
<div class="mb-6">
<label class="block mb-2">Enter Title: </label>
<input type="text" id="page_text" class="text-white" placeholder="Enter Title" {...register('page_Title',{ required: "Enter Your Title", maxLength: {value:255,message:"Cannot Exceed more 255 Characters" } })}/>
</div>
</form>
<div className= "text-white text-center rounded-xl shadow-xl">
<h1>Preview</h1>
<h3>{getValues("page_Title")}</h3>
</div>
I've created a sandbox here: https://codesandbox.io/s/angry-wave-nef2jo
Basically the issue is getValues doesn't automatically update when you enter text (onChange). You need to use the watch method as described in the documentation here: https://react-hook-form.com/api/useform/watch
For example:
const pageTitle = watch("page_Title", false);
Then:
<h3>{pageTitle}</h3>
inside the form put a button and trigger the getValues() method. like below
<button
type="button"
onClick={() => {
const values = getValues(); // { page_title: "someValue", test1: "test1-input", ... }
console.log({values});
}}
>
Get Values
</button>
Have a look at this basic example from the docs link too
I'm absolutely new to Angular.js, I got the file from someone to fix.
So the question is that I really want to change the div with clicking buttons, so I tried to search of it and i found the solution with radio button, but the thing is what i want to click is div.
So here is my code :
let vm = $scope
vm.isShown = function (color) {
return color === vm.color;
};
//this is the function in a controller
<div class="item">
<span class="group-name"
><p>PHASE 1.0</p>
Closed API Data Market</span
>
<input type="radio" ng-model="color" value="oneZero" /> 1.0
</div>
<div class="item">
<span class="group-name"
><p>PHASE 1.5</p>
Open API Data Market</span
>
<input
type="radio"
ng-model="color"
value="oneFive"
checked="checked"
/>
1.5<br />
</div>
</div>
</div>
<br />
<div class="servicePreparing" ng-show="isShown('oneZero')">
<img src="assets/img/serviceStop.jpg" />
</div>
<div class="select-list-area" ng-show="isShown('oneFive')">
I want to remove the inputs and want to click with div as class name as 'item'
You can see one example lives here: https://plnkr.co/edit/flMIhl6ugNUNXwpE
Also, what you have to do is set one variable (In the radio buttons were color), so in your AngularJS controller:
vm.color = '';
And set that value with ng-click in both divs, with the specific value, in your view you will have:
<div class="btn" ng-click="color = 'oneZero'">1.0</div>
<div class="btn" ng-click="color = 'oneFive'">1.5</div>
<div class="servicePreparing" ng-show="isShown('oneZero')">
One Zero Image Showed
</div>
<div class="select-list-area" ng-show="isShown('oneFive')">
One Five Image Showed
</div>
I used the following code, but the text does not clear when I click the addbtn.
This is a reactjs project.
function Addpage() {
const[note, setnote] = useState("");
function textchange(e) {
setnote(e.target.value);
console.log(note);
};
function savenote(){
localStorage.setItem('savednotes', note);
setnote("");
};
return (
<>
<Headersmall/>
<br/>
<div className="addcard">
<h1>Add new note.</h1>
<div className="title">
<input type="text" className="titlebox" id="addtitle" placeholder="Title"/>
</div>
<br/>
<div className="note">
<textarea type="text" className="notebox" id="addtxt" placeholder="Note" onChange = {textchange}/>
</div>
<br/>
<button className="addbtn" id='addbtn' onClick = {savenote}>Save</button>
</div>
<br/>
</>
)
}
When you're setting the value of note as an empty string by doing setnote("") inside savenote() function, you ARE changing the value of the state variable note, but it doesn't reflect in the textarea because your textarea input doesn't have a value associated to it. Try adding value={note} which will mean that there will be a "set and fetch" relationship between the textarea and the 'note' state variable
<textarea
value={note}
type="text"
className="notebox"
id="addtxt"
placeholder="Note"
onChange={textchange}
>
I have tried to add Link, to, href, a href, onClick to add a link to the button. This is the front end to a book-index project. I also tried history.push, I the button is in a form to submit. I want the button then take it to a landing page saying "book added" If I add a Link to the button, it will link to the page then the submit doesn't load. I can get one to work or the other, but not both. The code I have is for the submit.
this is in a react.js class component
render() {
return (
<div style={{padding:"10px"}}>
<h1 style={{textAlign:"center"}}>Add a Book Below</h1>
{console.log("state", this.state)}
<form onSubmit = {this.handleSubmit}>
<div className="add-title" style={{textAlign:"center", paddingBottom:"10px"}}>
<label>Title:</label>
<input
type="text"
name = "title"
value={this.state.title}
onChange={this.handleChange}
/>
</div>
<div className="add-author" style={{textAlign:"center", paddingBottom:"10px"}}>
<label>Author:</label>
<input
type="text"
name = "author"
value={this.state.author}
onChange={this.handleChange}
/>
</div>
<div className="submit" style={{textAlign:"center", paddingBottom:'100px'}}>
<button
type="submit"
value="submit"
>Submit</button>
I have implemented the react-localize-redux for language-translations in an application i am working with. I do get the translations inside html-elements, but i am failing to get translations to work with html-element-properties. For example input value.
It works using like this:
<form onSubmit={this.handleSubmit}>
<label className="atom_required" htmlFor="name">
<Translate id="textexample" />:
</label>
</form>
But if i try this id returns object Object:
<div className="atom_bottomButtons">
<input
id="atom_bottomButtons__submit"
disabled
className="btn btn-primary"
type="submit"
value={<Translate id="textexample" />}
/>
</div>
Does someone know how to map properties of html-elements?
Simply use the render-prop API:
<div className="atom_bottomButtons">
<Translate>{
({ translate }) => {
return <input
id="atom_bottomButtons__submit"
disabled
className="btn btn-primary"
type="submit"
value={translate("textexample")}
/>
}
}</Translate>
</div>
See also: translate's API