I'm trying to make a that allows users to make true/false questions. I've looked all around and can't figure out why these radio buttons don't appear in this React component (using Materialize CSS).
render() {
const { courseTitle, courseDescription } = this.props;
return (
<div className='container selection create-lecture'>
<div className='row'>
<form onSubmit={this.handleSubmit} className='white'>
<h5 className='grey-text text-darken-3'>True / False Question</h5>
<p></p>
<div className='input-field'>
<label htmlFor='questionQuestion'>Your True/False Question:</label>
<textarea className='materialize-textarea' id='questionQuestion' onChange={this.handleChange}>
</textarea>
</div>
<p>
<input id='radio-true' type="radio" value="true" checked={this.state.selectedRadioOption === "true"} onChange={this.onValueChange}/>
<label htmlFor='radio-true'>True</label>
</p>
<p>
<input id='radiofalse' type="radio" value="false" checked={this.state.selectedRadioOption === "false"} onChange={this.onValueChange}/>
<label htmlFor='radiofalse'>False</label>
</p>
<div className='input-field'>
<button className='btn custom-orange lighten-1 z-depth-0'>Create Question</button>
</div>
</form>
</div>
</div>
)
}
}
results in:
You need to use the correct markup as shown in the documentation. :
<label>
<input name="group1" type="radio" checked />
<span>Red</span>
</label>
Label (wrapper)
Input
Span
Materialize doesn't use the browser default radio. Always use the markup suggested by the docs!
Related
I have a form component which filters data based on the name and category of an asset (ignore the name). I have used the tag to create a dropdown menu but I want to replace this with an array of custom buttons on a seperate row which filter the data when clicked to give assets of that category. Below is the relevant code I have used.
<div className="row">
<div className="col">
<div className="content-block">
Reset filter
<h3>
Filter
</h3>
<form onSubmit={ (e) => this.props.onTriggerFilter(e) } autoComplete="off">
<div className="form-row">
<div className="form-group col-md-3">
<label htmlFor="name">Name</label>
<input
type="text"
className="form-control"
id="name"
value={this.props.filterData.name}
placeholder="Eg, PDF asset..."
onChange={({target}) => this.props.onFilterInputChange('name', target.value)}
/>
</div>
<div className="form-group col-md-3">
<label htmlFor="supplier">Category</label>
<select
name="asset_type"
className="form-control"
value={this.props.filterData.asset_type}
onChange={({target}) => this.props.onFilterInputChange('asset_type', target.value, 'select')}
>
<option value="">All</option>
{ this.props.assetTypeOptions.map((o, key) => (
<option key={ key } value={ o.value }>{ o.label }</option>
))}
</select>
</div>
</div>
<button type="submit" style={{visibility:'hidden'}}>Submit</button>
</form>
</div>
</div>
</div>
I want to replace the select field with a row of buttons in the form
<button type="button" class="btn btn-primary btn-rounded waves-effect">Generic</button>
and get the data to filter when one is pressed. How do I do that?
I'm write application with react, and I have a issue to use the tag input
enter code here:import React, { Component } from 'react'
enter code here :import { Formik } from 'formik';
enter code here:export class Login extends Component {
render() {
return (
<div class="header">
<div class="container">
<div class="logo"></div>
<div class="form">
<form>
<div class="inputemail">
<label class="labelinput" for="">email or phone</label>
<input class="input" type="text">
<div class="inputpassword">
<label class="labelinput" for="">Password</label>
<input class ="input"value type="password">
<a class="linkpassword" href="#">forget password?</a>
<input class="inputbtn" type="submit" value="entrar">enter</input>
</input>
</div>
</input>
</div>
</form>
</div>
</div>
</div>
)
};
}
export default Login;
when the react don't accept the tag input. someone know why this happen?
First of all, you have to use className="" instead of class="".
Second, You have an unclosed input <input class="input" type="text"> You have to close it first.
And the last part is also inappropriate for react.
<input class="inputbtn" type="submit" value="entrar">enter</input>
</input>
Please clean your HTML firstly. All tags have to be closed. Even such as and
If this doesn't solve the problem, please send us your error.
you have a sintax error in your code and your missing closing tags, use this:
render() {
return (
<div class="header">
<div class="container">
<div class="logo" />
<div class="form">
<form>
<div class="inputemail">
<label class="labelinput" for="">
email or phone
</label>
<input class="input" type="text" />
<div class="inputpassword">
<label class="labelinput" for="">
Password
</label>
<input class="input" value type="password" />
<a class="linkpassword" href="#">
forget password?
</a>
<input class="inputbtn" type="submit" value="enter" />
</div>
</div>
</form>
</div>
</div>
</div>
);
}
I want dropdown with radio button which needs to show when I click field and hide when I click outside and get the selected value in the inputfield.
I need the selected value in the input field instead of placeholder value which I have and with show/hide dropdown when I click input field
<div className="inputWithIcon" onClick={this.RadioDdOnclick} id="radiobtn">
<input className="inputBlock" id="radioSelect" type="text" placeholder="choose one" />
<i className="fa fa-angle-down" />
</div>
<div className={ "BudgetRadioDd"} id={ "RadioDd"} style={{display: 'none'}}>
<fieldset>
<h4>options to choose</h4>
<div>
<label><input type="radio" id="1"/>option 1</label>
</div>
<div>
<label> <input type="radio" id="2" />option 2</label>
</div>
<div>
<label><input type="radio" id="3"/>option 3</label>
</div>
</fieldset>
</div>
Not sure how to get this done using reactjs.
How to do this in React:
You can attach a ref to the <input> to access it from the parent component, then check if the <input> is focused. If it is focused render the radio buttons, else don't.
To show the value of the selected option in the input tag, store that value in the component's state then it's easy to track its value and share that value between the input and the radios.
Also I've added the name attribute to the radio inputs so that they work properly as radio buttons.
import React, { Component } from 'react';
class FormComponent extends Component {
constructor() {
super();
this.state = {
option: '',
inputIsFocused: false
}
}
handleChange = event => {
const { value } = event.target;
this.setState({option: value});
}
toggleRadio = event => {
const { inputIsFocused } = this.state;
this.setState({inputIsFocused: !inputIsFocused});
}
render() {
const { option, inputIsFocused } = this.state;
return (
<div>
<div className="inputWithIcon" id="radiobtn">
<input ref='input' value={ option } className="inputBlock" id="radioSelect" type="text" placeholder="choose one" onFocus={ this.toggleRadio } onFocusOut={ this.toggleRadio }/>
<i className="fa fa-angle-down" />
</div>
{ inputIsFocused && (
<div className={ "BudgetRadioDd"} id={ "RadioDd"}>
<fieldset>
<h4>options to choose</h4>
<div>
<label><input name='option' type="radio" id="1" value="1" checked={ option === '1' } onChange={ this.handleChange }/>option 1</label>
</div>
<div>
<label> <input name='option' type="radio" id="2" value="2" checked={ option === '2' } onChange={ this.handleChange }/>option 2</label>
</div>
<div>
<label><input name='option' type="radio" id="3" value="3" checked={ option === '3' } onChange={ this.handleChange }/>option 3</label>
</div>
</fieldset>
</div>
)}
</div>
)
}
}
A note on the above: I think there's an issue with onFocusOut, so that doesn't actually get fired. Also of note is that the inputIsFocused value used in render is not the one from state. This is because of the issue with onFocusOut so the value of inputIsFocused needs to come from referencing the DOM, but in order to trigger a rerender, the component's state needs to update.
Here's a snippet to show what it might look like (note that the value in the snippet does not update when when a button is selected, but that functionality is present in the React code):
function hideRadio() {
const radioDd = document.querySelector('.BudgetRadioDd');
radioDd.classList.add('hidden');
}
function showRadio() {
const radioDd = document.querySelector('.BudgetRadioDd');
radioDd.classList.remove('hidden');
}
.hidden {
display: none;
}
<div class="inputWithIcon" onClick={this.RadioDdOnclick} id="radiobtn">
<input class="inputBlock" id="radioSelect" type="text" placeholder="choose one" onfocus="showRadio();" onfocusout="hideRadio();"/>
<i className="fa fa-angle-down" />
</div>
<div class="BudgetRadioDd hidden" id="RadioDd">
<fieldset>
<h4>options to choose</h4>
<div>
<label><input name='attributeName' type="radio" id="1"/>option 1</label>
</div>
<div>
<label> <input name='attributeName' type="radio" id="2" />option 2</label>
</div>
<div>
<label><input name='attributeName' type="radio" id="3"/>option 3</label>
</div>
</fieldset>
</div>
However this seems like pretty much the functionality of a <select>, so maybe consider using one of those?
Input is a void element tag and must neither have children nor use dangerouslySetInnerHTML.
render() {
let radioid = this.props.radioid;
return (
<div className="row">
{this.props.options.map(function(option) {
return (
<div key={radioid} className="column">
<input type="radio" name={radioid} value={option}>
<label>{option}</label>
</input>
</div>
);
})}
</div>
);
}
For example options is a list of elements like A, B, C, D
As per the error, the input tag should not have any children, take the label out of input closure tag
render() {
let radioid = this.props.radioid;
return (
<div className="row">
{this.props.options.map(function(option) {
return (
<div key={radioid} className="column">
<label>{option}</label>
<input type="radio" name={radioid} value={option}/>
</div>
);
})}
</div>
);
}
You get the error coz in input tag in jsx should be self closing, so after return always jsx script should write.
render() {
let radioid = this.props.radioid;
return (
<div className="row">
{this.props.options.map(function(option) {
return (
<div key={radioid} className="column">
<label>{option}</label>
<input type="radio" name={radioid} value={option}/>
</div>
);
})}
</div>
);
}
HTML elements such as <area />, <br />, and <input /> are void elements which are only self-closing without any content.
Therefore, React will throw an exception if you set either children or dangerouslySetInnerHTML prop for a void element.
So, instead of writing this as
<div key={radioid} className="column">
<input type="radio" name={radioid} value={option}>
<label>{option}</label>
</input>
</div>
write it like this:
<div key={radioid} className="column">
<input type="radio" name={radioid} value={option}/>
<label>{option}</label>
</div>
Give a thumbs up if you like this answer.
In react inputs have to end with a single tag, not like
<input type="submit">Submit</input>
so write
<input />
but this may show submit query so write
<input value="Submit or login or whatever you like">
There you go :)
Thanks very much!
I solved.
I have 2 tags "input", a type text and button but just the first didn't worked.
<input type="text" onChange={(event)=>{this.setState({coinAvalue:event.target.value})}}>
<input type="button" value="Converter"onClick={this.converter}>
You should use a self-closing input tag like:
<input className="card-field-input" placeholder="text"/>
In my case, I had a select without the as='select' in my <Form.Control> call of react-bootstrap. So React rendered an <input> instead of a <select>
<Form.Control as='select' >
<option value="Buy">Buy</option>
<option value="Sell">Sell</option>
</Form.Control>
I am using Angular js, in which i have a textbox outside and an ng-repeat containing textbox and textarea. I want to check if the fields contain value when submit button is clicked. I am able to achieve the functionality for controls outside ng-repeat, but not sure how to achieve required field validation within ng-repeat, when submit button is click. Below is the existing code:
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate>
<div ng-controller="testController" ng-init="init()">
<div>
<label>Name :</label>
</div>
<div>
<input type="text" maxlength="150" required ng-model="testName" name="testName" />
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.testName.$error.required">Name is required</span>
<br />
<div class="row">
<div class="form-group ">
<label>Language</label>
<label>Title</label>
<label>Description</label>
</div>
</div>
<div class="row">
<div>
<div ng-repeat="Descriptions in testsWithDescription ">
<div>
<label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
</div>
<div>
<input type="text" maxlength="150" name="titleValidate[]" ng-model="Descriptions.Title" />
</div>
<div>
<textarea maxlength="500" name="descriptionValidate[]" noresize ng-model="Descriptions.Description"></textarea>
</div>
<div class="form-group col-md-1">
<a style="cursor:pointer"><img ng-src="{{DeleteIcon_url}}" alt="delete image" ng-click="($index == !selectedDeleteIcon) ||testsWithDescription.splice($index,1)" ng-class="{'disabled': $first}" /> </a>
</div>
</div>
</div>
</div>
<input type="submit" value="Submit" ng-click="submitted=true"/>
How to use required field validation for controls within ng-repeat using angular js?
Thanks
You could use $index to track the name of the different inputs in your ng-repeat.
<div ng-repeat="Descriptions in testsWithDescription ">
<input type="text"
maxlength="150"
name="titleValidate_{{$index}}"
ng-model="Descriptions.Title"
required />
</div>
You can now use the common validations from AngularJS like you already did: mainForm.$valid.