const AnswerGrid = React.createClass({
getInitialState: function(){
return {active: null};
},
radioClick: function(e){
this.setState({active: e.target.value});
},
render : function(){
return (
<li className="answerOption">
<input type="radio" onChange={this.radioClick} id={this.props.answer.answer_id} className="radioCustomButton" name={this.props.question_id} value={this.props.answer.answer_id}/><br/>
<label className="radioCustomLabel">{this.props.answer.title}</label>
</li>
);
}
});
This is my components call AnswerGrid
const QuestionGrid = React.createClass({
render : function(){
var rows = [];
console.log(this.props.active);
//console.log(this.props.question);
var question_id = this.props.question.question_id;
this.props.question.list_answer.map(function(answer){
rows.push(<AnswerGrid key={answer.answer_id} answer={answer} question_id={question_id} />);
});
return (
<div className="row">
<div className="col-md-12">
<h2 className="question"><b>{this.props.question.question_title}</b></h2>
<input type="type" className="rs" name="rs" value={this.props.active} /><br/>
<ul className="answerOptions">
{rows}
</ul>
<hr/>
</div>
</div>
);
}
});
I am using QuestionGrid to display list li with input from AnswerGrid
When i use value={this.props.active} at QuestionGrid , it not working.
Pls help me fix it
Related
So basically iam new in react and iam trying to create multiple select option using axio get method i have a problem that how can i add multiple select option in this file iam trying to do this with check box code below but keep getting error that a string is called on change function. Other than that the checkboxes are not opening due to that function
List item
import React, { Component, Fragment } from "react";
import axios from "axios";
class Home extends Component {
state = {
users: []
};
componentDidMount() {
axios.get("https://jsonplaceholder.typicode.com/users").then(res => {
console.log(res);
this.setState({
users: res.data
});
});
}
showCheckboxes = () => {
let expanded = false;
const checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
};
onChangeValue = e => {
const value = e.target.value;
debugger;
};
render() {
const { users } = this.state;
const nameList = users.length ? (
<select className="custom-select">
{users.map((user, i) => {
return (
<option key={i} value={user.name}>
{" "}
{user.name}
</option>
);
})}
</select>
) : (
"No Data"
);
const usernameList = users.length ? (
<select className="custom-select">
{users.map((user, i) => {
return (
<option key={i} value={user.username}>
{user.username}
</option>
);
})}
</select>
) : (
"No Data"
);
const emailList = users.length ? (
<select className="custom-select">
{users.map((user, i) => {
return (
<option key={i} value={user.email}>
{user.email}
</option>
);
})}
</select>
) : (
"No Data"
);
return (
<Fragment>
{nameList}
<hr />
{usernameList}
<hr />
{emailList}
<hr />
<div className="multiselect">
<div className="selectBox">
<select>
<option>Select an option</option>
</select>
<div className="overSelect" onClick="showCheckboxes()"></div>
</div>
<div id="checkboxes">
<label htmlFor="one">
<input type="checkbox" id="one" />
First checkbox
</label>
<label htmlFor="two">
<input type="checkbox" id="two" />
Second checkbox
</label>
<label htmlFor="three">
<input type="checkbox" id="three" />
Third checkbox
</label>
</div>
</div>
</Fragment>
);
}
}
export default Home;
this line :
<div className="overSelect" onClick="showCheckboxes()"></div>
to
<div className="overSelect" onClick={this.showCheckboxes}></div>
I'd like the text in my input box to clear once the enter button it pushed and the addTask function is added to the list. I tried document.getElementById("inp").innerHTML = "" and it didn't work. How can I do this?
HTML:
<div id="todo">
<h1>To-Do List</h1>
<section>
<input type="input" placeholder="what do you need to do?" v-model="newTask" v-on:keyup.enter="addTask" id="inp">
</section>
<ul>
<li v-for="task in todoList">
<label>{{ task }}</label>
<button type="button" v-on:click="removeTask(task)">X</button>
</li>
</ul>
</div>
VueJS:
var todo = new Vue({
el: 'div#todo',
data: {
newTask:'',
todoList: []
},
methods: {
addTask: function() {
var task = this.newTask
this.todoList.push(task)
},
removeTask: function(task) {
var index = this.todoList.indexOf(task)
this.todoList.splice(index, 1)
}
}
})
clear your model:
addTask: function() {
var task = this.newTask
this.todoList.push(task)
this.newTask = ''
}
I am making a recursive treeview with checkboxes using React JS. I want to make a form and submit button in order to get the checked values but I am not getting where to insert the submit button in the form. So far my code generates a submit button with each node.
toggle = () => {
this.setState(
{visible: !this.state.visible}
);
};
render() {
var childNodes;
if (this.props.node.childNodes != null) {
childNodes = this.props.node.childNodes.map(function(node, index) {
return <li key={index}><Treeview node={node} /></li>
});
}
var style;
if (!this.state.visible) {
style = {display: "none"};
}
return (
<form>
<label>
{this.props.node.title}
<input type="checkbox" onClick={this.toggle}/>
</label>
<ul style={style}>
{childNodes}
</ul>
<input type="submit" value="Submit"/>
</form>
);
}
I think there are two ways to go about doing what you want. One (Ex 1) would be having a structure with two components/methods, one for the form and another for the recursive checkbox structure.
Another (Ex 2) would to be to use props to conditionally render some portions.
Ex 1
function TreeView (props) {
var childNodes;
if (props.node.childNodes != null) {
childNodes = props.node.childNodes.map(function(node, index) {
return <li key={index}><Treeview node={node} /></li>
});
}
var style;
if (!props.visible) {
style = {display: "none"};
}
return (
<ul style={style}>
{childNodes}
</ul>
);
}
class Form extends React.Component {
constructor (props) {
super(props);
this.toggle = this.toggle.bind(this);
}
toggle () {
this.setState(
{visible: !this.state.visible}
);
};
render () {
return (
<form>
<label>
{this.props.node.title}
<input type="checkbox" onClick={this.toggle}/>
</label>
<TreeView node={props.node} visible={this.state.visible} />
<input type="submit" value="Submit"/>
</form>
);
}
}
Ex 2
class Treeview extends React.Component {
constructor (props) {
super(props);
this.toggle = this.toggle.bind(this);
}
toggle () {
this.setState(
{visible: !this.state.visible}
);
};
render () {
var childNodes;
if (this.props.node.childNodes != null) {
childNodes = this.props.node.childNodes.map(function(node, index) {
return <li key={index}><Treeview node={node} childTree /></li>
});
}
var style;
if (!this.state.visible) {
style = {display: "none"};
}
if (this.props.childTree) {
return (
<ul>
{childNodes}
</ul>
)
} else {
return (
<form>
<label>
{this.props.node.title}
<input type="checkbox" onClick={this.toggle}/>
</label>
<ul style={style}>
{childNodes}
</ul>
<input type="submit" value="Submit"/>
</form>
);
}
}
}
I have created react components for a form. I passed data as props from GetSteps component to PageHeader component. Then I will able to use that data from the PageHeader. Also I passed same data from the GetSteps component to YourDetails component. But the data didn't pass to the YourDetails component. I cannot find the error. any help will be appreciated. Thank You.
class GetSteps extends React.Component {
constructor(props) {
super(props);
this.state = {data: ''}
}
// componentWillMount() {
// var lang = [];
// $.each(this.props.value.Languages, function(k, v) {
// return lang[k] = v;
// }.bind(this));
// this.setState({ data: this.props.value.Languages })
//
// console.log(this.state)
// }
render()
{
return (
<div className="page-content">
<div className="container">
<PageHeader title={this.props.value.Title} subtitle={this.props.value.SubTitle} f={this.props.value.PreferredLanguage}/>
<YourDetails title={this.props.value.Title} preferredlang={this.props.value.PreferredLanguage}></YourDetails>
</div>
</div>
);
}
}
this is where I pass data as props
function PageHeader(props){
return(
<div className="page-header">
<span className="page-header-icon icon-world"></span>
<h3 className="title">{props.title}</h3>
<h4 className="sub-title special">{props.subtitle}</h4>
</div>
);
}
this is where I get data from GetSteps component
class YourDetails extends React.Component {
constructor(props) {
super(props);
this.state = {
havePartner: 'yes',
UserFirstName: "",
TravelPartnerName: "",
AmwayLocation: "",
Title: this.props.title
};
console.log(this.props);
this.handleInputChange = this.handleInputChange.bind(this);
this.handleOptionChange = this.handleOptionChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event){
console.log(this.state);
event.preventDefault();
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'radio' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
handleOptionChange(event){
this.setState({
havePartner: event.target.value
});
}
render() {
return (
<div className="main-content">
<form onSubmit={this.handleSubmit}>
<div className="field dropdown requiredField">
<label className="left">
Your prefered language
</label>
<div className="middleColumn">
<select name="language"
value={this.props.preferredlang}
onChange={this.handleInputChange}
className="dropdown requiredField align--left">
<option defaultValue value={this.props.preferredlang}>{this.props.preferredlang}</option>
<option value='g'></option>
<option value='fdg'></option>
<option value='df'></option>
<option value='dfg'></option>
</select>
</div>
</div>
<div className="field requiredField align--left">
<label>
Your First Name
</label>
<input
name="UserFirstName"
type="text"
onChange={this.handleInputChange} />
</div>
<div className="field optionset requiredField travel-partner align--left">
<label className="left">
Did you have a travel partner?
</label>
<ul className="optionset requiredField travel-partner align--left">
<li>
<input type="radio" value="yes" checked={this.state.havePartner === 'yes'} onChange={this.handleOptionChange} className="radio"/>
<label>Yes</label>
</li>
<li>
<input type="radio" value="no" checked={this.state.havePartner === 'no'} onChange={this.handleOptionChange } className="radio"/>
<label>No</label>
</li>
</ul>
</div>
<div className="field text requiredField align--left">
<label className="left">
Your travel partner's first name
</label>
<input className="text requiredField align--left"
name="TravelPartnerName"
type="text"
onChange={this.handleInputChange} />
</div>
<div className="field text">
<label className="left requiredField">*Required Field</label>
</div>
<div className="Actions">
<button type="submit" value="Submit" className="action nolabel " >
<span>Proceed to Day 1</span>
<span className="progress"></span>
</button>
</div>
</form>
</div>
);
}
}
this is where I didn't get data from GetSteps component
class Step extends React.Component {
constructor(props) {
super(props);
this.state = {data: ''}
}
componentWillMount() {
var link = document.getElementById('step').getAttribute('link');
$.getJSON( link+"VideoBuildForm", function( data, status ) {
fieldValues.PreferredLanguage = data.compilation.PreferredLanguage;
fieldValues.AmwayLocation = data.location;
fieldValues.Languages =
$.each(data.languages, function(k, v) {
return data.languages[k] = v;
});
fieldValues.Title = data.title;
fieldValues.SubTitle = data.subtitle;
this.setState({ data: fieldValues });
}.bind(this));
}
render() {
return (
<div>
<GetSteps value={this.state.data}/>
</div>
);
}
}
this is where I pass data to the GetSteps component
Try using props.title in your constructor instead of this.props.title.
I have two function in Reactjs. When function one call a function of function two. There have error same as
"Uncaught TypeError: this.props.onButonShowClick is not a function"
This is function one :
var HiddenEdit = React.createClass({
_handleOnClick: function(e) {
e.preventDefault(),
this.props.onButonShowClick(true);
},
render: function() {
return (<span className="col-lg-2 btn-action-group">
<a className="add btn-for-view" href={this.props.url_detail} id="btn-add-chapter-123" title="Add"></a>
<a className="edit btn-for-view" onClick={this._handleOnClick} id={this.props.id_chapter} title="Edit"></a>
<a className="trash btn-for-delete btn-delete-episode" data-confirm="Are you sure?" rel="nofollow" data-method="delete" href=""></a>
</span>);
}
});
And this is a function two
var ChapterList = React.createClass({
_handleOnPaginate: function(pageNumber) {
this.props.inPagenate(pageNumber)
},
getInitialState: function () {
return {
childVisible: false
};
},
_handleOnClick: function(params) {
this.state.childVisible = params;
},
render: function() {
var showEdit = this.state.childVisible;
var chapterNodes = this.props.data.chapters.map(function(chapter, index) {
var url_chapter_detail = "/admin/chapters/" + chapter.chapter_id + "/chapter_details";
var btn_edit = "btn-edit-chapter-" + chapter.chapter_id;
var href_delete = "/admin/mangas/" + chapter.manga_id + "/chapters/" + chapter.chapter_id;
var div_chapter = "chapter-" + chapter.chapter_id;
return (<div className="row item-data" id={div_chapter}>
<div className="text-data-row">
<input value={chapter.chapter_id} type="hidden" className="chapter[manga_id]" id="chapter_manga_id" />
<span className="col-lg-1">
<input className="form-control" disabled="disabled" type="text" value={chapter.chapter_order} name="chapter[chapter_order]" id="chapter_chapter_order" />
</span>
<span className="col-lg-5">
<input className="form-control" disabled="disabled" type="text" value={chapter.chapter_name} name="chapter[chapter_name]" id="chapter_chapter_name" />
</span>
<span className="col-lg-2">
<input className="form-control" disabled="disabled" type="text" value={chapter.by_group} name="chapter[by_group]" id="chapter_by_group" />
</span>
{
showEdit ? <ShowEdit url_detail={url_chapter_detail} id_chapter="btn_edit" /> : <HiddenEdit onButonShowClick={this._handleOnClick} url_detail={url_chapter_detail} id_chapter="btn_edit" />
}
</div>
</div>);
});
return (<div className="form-post-movie" id="form-post-movie" role="form">
<div className="col-lg-12">
<div className="list-data">
{chapterNodes}
</div>
</div>
</div>
<div className="div-page">
<PaginatorSection totalPages={this.props.data.meta.total_pages} currentPage={this.props.data.meta.current_page} onPaginate={this._handleOnPaginate} />
</div>
</div>);
}
});
Can anyone help me solve this?
Well, this is undefined inside the callback of an array map. (Array.prototype.map() docs)
And so will be the value passed as onButtonShowClick prop.
<HiddenEdit onButonShowClick={this._handleOnClick} url_detail={url_chapter_detail} id_chapter="btn_edit" />
You should fix it by passing this as the second parameter of that map:
var chapterNodes = this.props.data.chapters.map(function(chapter, index) { /*...*/ }, this);
Also, you should take a look at React's docs about dynamic children.