I wonder is it okay to keep some UI state as instance variables(this) rather than in react state object. For example making controlled inputs sometimes becomes tedious, wouldn't it be better to keep it like:
import React from 'react';
export default class extends React.Component {
selectedCheckboxes = new Set();
searchInput = '';
radioButton = undefined;
onCheckboxChange = ({target: {value}}) => {
if (this.selectedCheckboxes.has(value)) {
this.selectedCheckboxes.delete(value);
} else {
this.selectedCheckboxes.add(value);
}
};
submit = e => {
e.preventDefault();
const searchInput = this.searchInput;
const checkboxes = [...this.selectedCheckboxes];
const radioButton = this.radioButton;
console.log(searchInput, checkboxes, radioButton);
};
render() {
return (
<form className="Example" onSubmit={this.submit}>
<div className="checkboxes">
<input type="checkbox" value="a" onChange={this.onCheckboxChange}/>
<input type="checkbox" value="b" onChange={this.onCheckboxChange}/>
<input type="checkbox" value="c" onChange={this.onCheckboxChange}/>
</div>
<div className="search">
<input type="text" onChange={e => this.searchInput = e.target.value}/>
</div>
<div className="radio-buttons">
<input type="radio"
name="radio"
value="1"
onChange={e => this.radioButton = e.target.value}/>
<input type="radio"
name="radio"
value="2"
onChange={e => this.radioButton = e.target.value}/>
<input type="radio"
name="radio"
value="3"
onChange={e => this.radioButton = e.target.value}/>
</div>
<button type="submit">submit</button>
</form>
)
}
}
I know downside of this approach is that component is not notified when value of this-variables has changed so component will not update. But on the other side sometimes it is not neccessary (like in my example) and it can boost performance as it dont triger re-render, and avoids reconcilation.
Reference
Related
I want to display user inputs and render them as new inputs are in. But currently, I can't seem to find a way to store the ratio values of multiple selections. I have tried "bind.(this)" and etc. None worked :(
Here's my code
import React, { Component } from "react";
class Input extends Component {
state = {
nameItems: [],
ageItems: [],
statusItems: [],
nameInput: '',
ageInput: '',
statusInput: ''
}
nameChangeHandler = ({target:{value}}) => this.setState({
nameInput: value
})
ageChangeHandler = ({target:{value}}) => this.setState({
ageInput: value
})
submitHandler = e =>{
e.preventDefault()
this.setState({
nameItems: [...this.state.nameItems, this.state.nameInput],
ageItems: [...this.state.ageItems, this.state.ageInput],
statusItems: [...this.state.statusItems, this.state.statusInput],
nameInput: '',
ageInput: '',
statusInput: ''
})
}
render() {
return (
<div>
<h1>User signup form</h1>
<form onSubmit={this.submitHandler}>
<label for="name">Name:</label><br />
<input type="text" id="name" name="name" value={this.state.nameInput} onChange={this.nameChangeHandler} /><br />
<label for="age">Age:</label><br />
<input type="number" id="age" name="age" value={this.state.ageInput} onChange={this.ageChangeHandler}/><br />
<div class="schoolYear">
<p>Your status:</p>
<input type="radio" id="freshman" name="status" value="freshman" />
<label for="freshman">Freshman</label><br />
<input type="radio" id="css" name="status" value="sophomore" />
<label for="sophomore">Sophomore</label><br />
<input type="radio" id="junior" name="status" value="junior" />
<label for="junior">Junior</label><br />
<input type="radio" id="senior" name="status" value="senior" />
<label for="senior">Senior</label><br />
</div>
<input class="submit" type="submit" value="Submit" />
<ul>
{
this.state.nameItems.map((key) => <li>{key}</li>)
}
{
this.state.ageItems.map((key) => <li>{key}</li>)
}
{
this.state.statusItems.map((key) => <li>{key}</li>)
}
</ul>
</form>
</div>
)
}
}
export default Input;
I have tried using the onChange on each individual option and the whole div but still can seem to obtain the radio value. Also when I tried setting "checked" the whole program seems to end up in a loop.
Just Copied Your code .
First of All , if you want to multiple select radio , don't name it as the same.
<div class="schoolYear">
<p>Your status:</p>
<input type="radio" id="freshman" name="freshman" value="freshman" onChange={(event)=>{setStatus((prev)=>[...prev,event.currentTarget.value])}}/>
<label for="freshman">Freshman</label><br />
<input type="radio" id="css" name="css" value="sophomore" onChange={(event)=>{setStatus((prev)=>[...prev,event.currentTarget.value])}}/>
<label for="sophomore">Sophomore</label><br />
<input type="radio" id="junior" name="junior" value="junior" onChange={(event)=>{setStatus((prev)=>[...prev,event.currentTarget.value])}}/>
<label for="junior">Junior</label><br />
<input type="radio" id="senior" name="senior" value="senior" onChange={(event)=>{setStatus((prev)=>[...prev,event.currentTarget.value])}}/>
<label for="senior">Senior</label><br />
</div>
For example I have the next options in html, define the global name and different id to each input radio:
<form id="mokepon-form">
<input type="radio" name="mokepon" id="hipodoge">
<label for="hipodoge">Hipodoge</label>
<input type="radio" name="mokepon" id="capipego">
<label for="capipego">Capipego</label>
<input type="radio" name="mokepon" id="ratigueya">
<label for="ratigueya">Ratigueya</label>
<button type="submit">Seleccionar</button>
</form>
To read the value I read the selector, the global name and the checked attribute and then read the id property, you can use the value property as well.
const chooseMokepon = (e) => {
e.preventDefault();
const $selectedMokepon = document.querySelector('input[name=mokepon]:checked');
const { id: mokeponValue } = $selectedMokepon;
if (!mokeponValue) return;
console.log(mokeponValue);
}
$mokeponForm.addEventListener('submit', e => chooseMokepon(e));
You might use this snippet:
let submitBtn = document.querySelector('button[type="submit"]');
submitBtn.addEventListener('click', function(event){
event.preventDefault();
let selectedOption = document.querySelector('input[type="radio"][name="mokepon"]:checked');
if(selectedOption && selectedOption.value){
console.log('Selected: ' + selectedOption.value);
}
});
<form id="mokepon-form">
<input type="radio" name="mokepon" id="hipodoge" value="hipodoge">
<label for="hipodoge">Hipodoge</label>
<input type="radio" name="mokepon" id="capipego" value="capipego">
<label for="capipego">Capipego</label>
<input type="radio" name="mokepon" id="ratigueya" value="ratigueya">
<label for="ratigueya">Ratigueya</label>
<button type="submit">Seleccionar</button>
</form>
What I currently have is a parent component called WhatDo.tsx that has a button which should open a child component called AddToWardrobe.tsx, which is currently simply a form to be filled out. To do this, I've used a { boolean ? ( show AddToWardrobe component):(show button to open component)}. However, when I click on the button, instead of opening the AddToWardrobe component, everything disappears from the page including the WhatDo component.
Here is the function for WhatDo.tsx(note that there are two placeholders for future buttons):
export default function WhatDo() {
const [showATW, setShowATW] = useState(false);
return(
<div className="WhatDo">
<div className="ActionNavText">
What would you like to do?
</div>
<div className="ActionNavButtons">
<button id="actionbutton">placeholder</button>
<div className="Show__ATW">
{showATW?
<div className = "ATW__shown">
<AddToWardrobe onSubmit={postNewItem}/>
<button onClick ={() => setShowATW(false)}>Nvm!</button>
</div>
:
<button id="actionbutton" onClick={() => {setShowATW(true)}}>Add to your Wardrobe</button>
}
</div>
<button id="actionbutton">placeholder</button>
</div>
<div className="SignOutButton">
<button onClick={signOut}>sign out?</button>
</div>
</div>
)
}
and here is the function for AddToWardrobe.tsx:
interface Props {
onSubmit:(Item: Item) => void;
}
export default function AddToWardrobe({onSubmit}: Props) {
const [itemType, setItemType] = useState<string[]>([]);
const [itemPrinted, setItemPrinted] = useState(false);
const [itemColor, setItemColor] = useState<string[]>([]);
const [secondaryColor, setSecondaryColor] = useState<string[]>([]);
//type check boxes
const [accessoryBox, setAccessoryBox] = useState(false);
const [topBox, setTopBox] = useState(false);
const [bottomBox, setBottomBox] = useState(false);
const [shoeBox, setShoeBox] = useState(false);
const handleTypeSet = (e: any) => {
const typeValue = e.target.value;
// check for item type
if(typeValue === "Accessory") {
setItemType(e.target.checked);
}
if(typeValue === "Top") {
setItemType(e.target.checked);
}
if(typeValue === "Bottom") {
setItemType(e.target.checked)
}
if(typeValue === "Shoes") {
setItemType(e.target.checked);
}
}
//check whether or not printed
const handlePrintChange = (e: any) => {
const printValue = e.target.value;
if (printValue === true) {
setItemPrinted(e.target.checked);
} // else false, I guess?
}
function handleSubmit(e:FormEvent) {
e.preventDefault();
const CurrentItem: Item = {
type: itemType,
printed: itemPrinted,
primaryColor: itemColor,
secondaryColor: secondaryColor,
}
onSubmit(CurrentItem);
//probably here the addtowardrobe component will close/return to main screen
// display a message that says if the item was added successfully or not
}
return (
<div className = "AddToWardrobe">
<form onSubmit={handleSubmit}>
<label className = "ATW__question">What would you like to add?</label>
<div className="ATW__input">
<input type="checkbox" value="Accessory" onChange={handleTypeSet} checked={accessoryBox}>Accessory</input>
<input type="checkbox" value="Top" onChange={handleTypeSet} checked={topBox}>Top</input>
<input type="checkbox" value="Bottom" onChange={handleTypeSet} checked={bottomBox}>Bottom</input>
<input type="checkbox" value="Shoes" onChange={handleTypeSet} checked={shoeBox}>Shoes</input>
</div>
<label>Is this item printed, textured, or solid?</label>
<div className="ATW__primarycolor">
<input type="checkbox"></input>
</div>
<input className='submit' type="submit"value ="Submit"/>
</form>
</div>
)
}
It may be worth noting that the form for AddToWardrobe is also not AS complete as it's going to be, but I feel like clicking on the button should be rendering something, or at the very least not making the entire parent component disappear!
<input> cannot have children. But in AddToWardrobe Component , you are enclosing text in <input>
<div className="ATW__input">
<input type="checkbox" value="Accessory" onChange={handleTypeSet} checked={accessoryBox}>Accessory</input>
<input type="checkbox" value="Top" onChange={handleTypeSet} checked={topBox}>Top</input>
<input type="checkbox" value="Bottom" onChange={handleTypeSet} checked={bottomBox}>Bottom</input>
<input type="checkbox" value="Shoes" onChange={handleTypeSet} checked={shoeBox}>Shoes</input>
</div>
instead use it like this
<div className="ATW__input">
<input type="checkbox" value="Accessory" onChange={handleTypeSet} checked={accessoryBox} />
<input type="checkbox" value="Top" onChange={handleTypeSet} checked={topBox} />
<input type="checkbox" value="Bottom" onChange={handleTypeSet} checked={bottomBox}/>
<input type="checkbox" value="Shoes" onChange={handleTypeSet} checked={shoeBox}/>
</div>
Need to create radio buttons for Title (Mr. & Ms.) using react and the ref attribute.
Code for Class(Omitting the useless part):-
getTitle () {
// how could I get the selected title value here
var title = this.refs. ??;
},
render () {
return (
<div className='input-wrap'>
<label className='label'>
Mr.
</label>
<input className='input'
type='radio'
ref= 'title'
name='user_title'
value='Mr.'
selected />
<label className='label'>
Ms.
</label>
<input className=input'
type='radio'
ref= 'title'
name='user_title'
value='Ms.' />
</div>
)
}
Question:- How could I get the selected Title value in getTitle() ?
You can do it without refs.
class Radio extends React.Component{
constructor(){
super();
this.state = {
inputValue : ''
}
}
change(e){
const val = e.target.value;
this.setState({
inputValue : val
})
}
render(){
return <div>
<label>MR<input type="radio" name="name" onChange={this.change.bind(this)} value="MR"/></label>
<label>MS<input type="radio" name="name" onChange={this.change.bind(this)} value="MS"/></label>
<br/>
<h2>Value : {this.state.inputValue}</h2>
</div>
}
}
React.render(<Radio/>, document.getElementById('container'))
Fiddle example is here
I hope it will help you !
Thanks!
I'm making a form, and I was in need of a radio input. How do I get the checked radio input in a onSubmit-function, what is the correct way?
This is my code, I myRadioInput-variable to contain either Option A or Option B when I submit:
React.createClass({
handleSubmit: function() {
e.preventDefault();
var myTextInput = this.refs.myTextInput.getDOMNode().value.trim();
var myRadioInput = "How ?";
},
render: function() {
return (
<form onSubmit={this.handleSubmit}>
<input type="text" ref="myTextInput" />
<label>
<span>Option A</span>
<input type="radio" name="myRadioInput" value="Option A"/>
</label>
<label>
<span>Option B</span>
<input type="radio" name="myRadioInput" value="Option B"/>
</label>
<input type="submit" value="Submit this"/>
</form>
)
}
});
If you make sure all your form elements have name attributes, you can extract data from the form onSubmit using form.elements:
handleSubmit: function(e) {
e.preventDefault()
var form = e.target
var myTextInput = form.elements.myTextInput.value
var myRadioInput = form.elements.myRadioInput.value
// ...
}
In modern browsers, form.elements.myRadioInput should be a RadioNodeList which has a .value corresponding to the selected value, but when that's not supported you will get a NodeList or HTMLCollection of nodes which must be iterated over to find the selected value.
I also have a reusable React component - <AutoForm> - which uses a generic implementation of data extraction from form.elements for you. I've used it in the snippet below:
<meta charset="UTF-8">
<script src="http://fb.me/react-0.13.1.js"></script>
<script src="http://fb.me/JSXTransformer-0.13.1.js"></script>
<script src="https://cdn.rawgit.com/insin/react-auto-form/master/dist/react-auto-form.js"></script>
<div id="app"></div>
<script type="text/jsx;harmony=true">void function() { "use strict";
var Example = React.createClass({
getInitialState() {
return {submittedData: null}
},
handleSubmit(e, submittedData) {
e.preventDefault()
this.setState({submittedData})
},
render() {
return <div>
<AutoForm onSubmit={this.handleSubmit}>
<input type="text" name="myTextInput" />
<label>
<span>Option A</span>
<input type="radio" name="myRadioInput" value="Option A"/>
</label>
<label>
<span>Option B</span>
<input type="radio" name="myRadioInput" value="Option B"/>
</label>
<input type="submit" value="Submit this"/>
</AutoForm>
{this.state.submittedData && <pre>
{JSON.stringify(this.state.submittedData, null, 2)}
</pre>}
</div>
}
});
React.render(<Example/>, document.getElementById('app'))
}()</script>
You shouldn't use refs to get access to DOM nodes and inspect their value. Instead you should link the inputs value to a property on the component state.
Here are some examples of how to do it: https://facebook.github.io/react/docs/two-way-binding-helpers.html
{ items.map(item =>
<span id="qn" key={item.qno}>{item.qno}</span>
)}
{ items.map(item =>
<span id="qd" key={item.qno}>{item.question}<br/>
<br/>
<input onClick={this.captureClick} type="radio" value="1" checked={this.state.option === "1"}
onChange={this.handleChange}/>
{ item.options.map(option =>
<span id="op" key={option.option1}>
{option.option1}</span>
)}<br/>
<br/> <input onClick={this.captureClick} type="radio" value="2" checked={this.state.option === "2"}
onChange={this.handleChange} />
{ item.options.map(option =>
<span id="op" key={option.option2}>
{option.option2}</span>
)}<br/><br/>
<input onClick={this.captureClick} type="radio" value="3" checked={this.state.option === "3"}
onChange={this.handleChange} />
{ item.options.map(option =>
<span id="op" key={option.option3}>
{option.option3}</span>
)}<br/><br/>
<input onClick={this.captureClick} type="radio" value="4" checked={this.state.option === "4"}
onChange={this.handleChange} />
{ item.options.map(option =>
<span id="op" key={option.option4}>{option.option4}</span>
)}<br/><br/>
<button type="submit" className="save" onClick={this.onSave}>SAVE</button>
</span>
You can use Radio button's like this also
i use this solution for radio button two way binding with active :
inside render() method:
const items = [
{label: 'one', checked: false},
{label: 'two', checked: true},
{label: 'three', checked: true}
];
items.map((item, index) => (
<div className={`radioItem (item.checked) ? 'active' : ''`}>
<label>
{item.label}
<input type="radio"
name="address"
value={item.label}
onClick={(e)=>{
$('.radioItem').filter('.active').removeClass('active');
$(e.currentTarget).closest('.radioItem').addClass('active');
}}
ref={elm => $(elm).prop('checked', item.checked)}
/>
</label>
</div>
))