I cannot get my reactjs component to reflect the actual changes in state on a checkbox. Could anyone kindly assist or point out what is wrong with my code below.
This is my state
state = {
data: {
name: "",
address: "",
city: "",
country: "",
mobile_number: "",
description: "",
has_conference: false,
star_rating: "",
},
errors: {},
};
This handle checkbox method
toggleChange = () => {
this.setState({
has_conference: !this.state.data["has_conference"],
});
};
And finally the checkbox code in render method
<label>
<input
type="checkbox"
has_conference={this.state.data["has_conference"]}
onChange={this.toggleChange}
/>
Conferencing
</label>
There are two things to correct in your code.
1: In toggleChange you dont change this.state.data.has_conference, but you change this.state.has_conference which is not exists in initial state. For changing this.state.data.has_conference you need to do following in your toggleChange function:
let data = this.state.data
data.has_conference = !data.has_conference
this.setState({data})
2: In you need to bind your this.state.data.has_conference value to the checked attribute. In code you need to write:
<input type="checkbox" onChange={this.toggleChange} checked={this.state.data.has_conference}
Hope this help.
Related
I am new to react and I am trying to upload a file to my project. All is going well except when I am sending a file request to the backend it shows empty [] to that particular file.
This is how I am trying to send the value. In this values consists of an object of all the input fields in my form whose initial values are set as null.
const initialValues = {
fy_id: "",
main_chalani_no: "",
section_chalani_no: "",
department_id: "",
chalani_basis: "",
darta_id: "",
main_chalani_date: "",
section_chalani_date: "",
letter_no: "",
letter_date: "",
chalani_office: "",
subject: "",
chalani_type: "",
chalani_medium: "",
medium_dtl: "",
file_one: "",
file_two: ""
};
<input className="form-control" name="file_one" type="file"
onChange={e => {
if (e.target.files && e.target.files.length > 0)
{
setAvatarPreview(URL.createObjectURL(e.target.files[0]));
}
console.log(e.currentTarget.files[0]);
values.file_name = e.currentTarget.files[0];
}}
/>
Console.log is returning the file Console.log ss
And in the laravel I can get all the values but not file die and dump ss
If anybody could help me out I would be grateful and sorry for my question if I had made mistakes on them and could not make it clear as possible
I have the following vue array;
server: [
{ id: 1, name: 'Name A', ipaddress: '192.168.1.1', status: true, applied: true, modal: false },
{ id: 1, name: 'Name A', ipaddress: '192.168.1.1', status: true, applied: true, modal: false },
]
I use this array to show these information on a data table. Users can add new rows to this table, that is, they can push the array. In addition, they can delete the rows they want from the table with the splice method. Finally, each row has an edit button. Since these buttons are connected to the elements in the array with the v-model, users can make changes on the row they want in the modal window that opens.
Adding and editing operations are carried out with two different modalities that open when the button is pressed.
In line with all this information, there is a question I want to ask. How can I write validation with Vuelidation to an array where new rpws can be added continuously? Here is my vuelidation functions;
validations: {
server: {
required,
$each: {
name: {
required
},
ipaddress: {
required
}
}
}
}
As an example, I just defined the required attribute for two elements. And here is how I use them in my add and edit modals;
<div>
<div">
<label>Name</label>
</div>
<div>
<label>:</label>
</div>
<div>
<input v-if="server[i].modal" v-model="server[i].name" type="text"/>
</div>
<small class="error-msg" v-if="!$v.server[i].name.required && $v.server[i].name.$dirty">Name is required.</small>
</div>
Here is how I add a new row to the table;
addNewRow(){
this.server.push({
name: "",
ipaddress: "",
status: true,
applied: false,
modal: false
});
},
And now I have this error;
[Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"
I think I'm missing an important part here so how can I make this correct? Thanks in advance.
Your add modal might be delay with the template so no server[i] item would be defined. I would suggest using a different variable for add (newItem = {name: '', ...})
<input type="checkbox" ng-model="mail.email" name="email"
ng-true-value="'mail.email'" ng-false-value="'0'">
This is my code while im going to edit i need to fetch the value from database but if i click the checkbox it shows the following response
{
regid: "NADr333434",
email: "mail.email",
altemail: "mail.altemail",
htmlcontent: "<b>kuhiuhioh oih oihih</b>"
}
I need the output as the follwing format how to get this
{
regid: "NADr333434",
email: "test#gmail.com",
altemail: "alternate#test.com",
htmlcontent: "<b>kuhiuhioh oih oihih</b>"
}
I have a state in which i have
I had initialized my data state as null
For whole code visit
https://codeshare.io/5zMyXD
Calling aixos api request on componentDidMount
axios.post("http://localhost/axios1/index.php",data)
.then(res=>this.setState({data:res.data},
()=>console.log(this.state.data)))
Getting this on state
{id: "1", name: "vivek", fname: "modi", mobile: "9024555623", photo: "http://localhost/axios1/uploaded/student/rhinoslider-sprite.png"}
fname: "modi"
id: "1"
mobile: "9024555623"
name: "vivek"
photo: "http://localhost/axios1/uploaded/student/rhinoslider-sprite.png"
<input defaultValue={this.state.data.name} />
how to set these values in it's input like input for name input for fname
{id: "1", name: "vivek", fname: "modi", mobile: "9024555623", photo: "http://localhost/axios1/uploaded/student/rhinoslider-sprite.png"}
fname: "modi"
id: "1"
mobile: "9024555623"
name: "vivek"
photo: "http://localhost/axios1/uploaded/student/rhinoslider-sprite.png"
<input defaultValue={this.state.data.name} />
Just use name from state
as if the object you mentioned is state then you can directly access state keys from state
like
this.state.name || this.state.mobile
You need to show your code in order to get better help but
If you have a correct state you can change values like this:
<input type="text" name="fname" value={this.state.data.name}>
But your state is null and the code you showed has problem, you need to fill your state correctly, in your class you can write:
State={name:"test"}
And it will work fine. Hope this can help you
update now write this:
{this.state.data && this.state.data.name
&& ( < input defaultValue={this.state.data.name} /> )}
You can set like call your axios request through
componentDidMount(){
axios.post("http://localhost/axios1/index.php",data)
.then(res=>this.setState({data:res.data},
()=>console.log(this.state.data)))
}
Suppose you are getting this in your state
state={
data:{
id: "1",
name: "vivek",
fname: "modi",
mobile: "9024555623",
photo: "http://localhost/axios1/uploaded/student/rhinoslider-sprite.png"
}
}
and then render it as
render(){
const {name,fname} = this.state.data?this.state.data:"";
return(
<div>
<input defaultValue={this.state.name} />
<input defaultValue={this.state.fname} />
</div>
);
}
Change this in your code, line no 31
this.setState({res.data},()=>console.log(this.state))
The codes below returns Uncaught TypeError: Cannot set property 'checked' of null.
what is the correct way to programmatic set checkbox as checked?
array.forEach(this._getAllCheckBoxIDs(), function(item){
dom.byId(item).checked = true;
}, this);
The following example shows a programmatic example on how to set property checked for a widget checkbox.
The script gets references of your checkboxes using dijit/registry opposite to querying the DOM.
Instead of setting a property directly for your widget like this:
dom.byId(item).checked = true;
I would suggest using a setter like:
widgetReference.set('checked', true);
This will allow the widget life-cycle to work properly.
Live example here:
https://jsfiddle.net/femtf4uh/
require(["dijit/form/CheckBox", "dijit/registry", "dijit/form/Button", "dojo/domReady!"], function(CheckBox, registry, Button) {
new CheckBox({
id: "checkBox0",
name: "checkBox0",
value: "option0",
checked: false,
onChange: function(event) {
}
}, "checkBox0").startup();
new CheckBox({
id: "checkBox1",
name: "checkBox1",
value: "option1",
checked: false,
onChange: function(event) {
}
}, "checkBox1").startup();
var markCheckAll = function() {
registry.toArray().forEach(function(widget) {
if (widget.type === 'checkbox'){
widget.set('checked', true);
}
});
};
markCheckAll();
});
<input id="checkBox0" />
<label for="checkBox">Option 0</label>
<br>
<input id="checkBox1" />
<label for="checkBox">Option 1</label>
<br>
Well, If you you have the collections of dojo checkboxes then I would suggest you to use registry.byId instead of dojo.byId because you need checkbox dojo widget along with it's domNode to update its attribute.
dojo class name:-
dijit/registry
Ex:-
// require registry class first
array.forEach(this._getAllCheckBoxIDs(), function(item){
registry.byId(item).set("checked", true);
}, this);
for more details please click here...
Hoping this will help you :)