ReactJS: How to put <input/> inside a Material UI's <TextField/>? - javascript

I am trying to make <TextField/> (http://www.material-ui.com/#/components/text-field) as <input/>. So I attempted the following:
<TextField
hintText='Enter username'
>
<input
className="form-control"
ref='username'
type='text'
/>
</TextField>
But it is not picking up the ref correctly. When this.refs.username.value.trim() is logged, it displays an error that value is undefined. But when <input/> is used alone, it picks up the inputted text correctly.
What is the proper the way to use <input/> but with <TextField/> as wrapper for styling?
Thank you in advance!

I don't think you can have an input field inside a TextField component

Material UI's TextField Is An Input So all You need to do is add another TextField Below it add styling if you want them closer
you couldnt do <input><input></input></input> in normal HTML.
<TextField hintText="Hint" name="Name" fullWidth={true} onChange={this.handleChange} />
you just need a handle change function which you should be able to work out from googling if you need one.

Related

Why the input doesnt work when generated by React

This input work correct, when i just add it to the index.html. But it doesnt work when generated by react. The nums in input form just dont changing. Why is this happening?
<input type="date" name="date" value="2003-12-16" max="2021-07-03"/>
To achieve your goal you have go with React way (Controlled Components):
<input type="date" value={this.state.value} onChange={this.handleChange} max="2021-07-03" />
Working demo: Codesandbox
To know about Uncontrolled Components please visit: Uncontrolled Components

Can't set 'touched' to true

I just trying to create a custom Formik <Field />. It is a <input type = file /> with opacity=0 and depending of values i styling my <Error /> component and <input type = text />. values.photo is ok. The problem is that touched never becoming true, so i can't show my <Error /> component. Can you explain what goes wrong?
https://codesandbox.io/s/purple-violet-qgxr3?file=/src/components/FileInput.js
in your file input component just add this:
form.setTouched({...form.touched,[field.name]: true });
setTouched take object of fields and field.name is the file input name.
when you handle the file input by listening to onChange event.
As soon as that onChange method is called you can mark your field asTouched by calling
.markAsTouched() so that it would show the error if the condition in validated.

Clear redux form field (DatePicker) onclick 'x'

Hello I am using DatePicker from redux-form-material-ui and I can't clear the field - there is no way to do that withing this component which i described here:
https://github.com/erikras/redux-form-material-ui/issues/262
Therefore I want to add 'x' button on the field on the right and onclick it should clear the field... How i can do it? How I can access the field in the method?
<Field
name="dateOfBirth"
type="text"
component={DatePicker}
className={css.fullWidth}
fullWidth
formatDate={formatDate}
/>
It appears that redux-form-material-ui doesn't cleanly expose the ability to manipulate the field's value. But, it does suggest a way to dig into the children via refs.
In your case, it would look something like:
handleClick() {
this.refs.dobField // the Field
.getRenderedComponent() // on Field, returns ReduxFormMaterialUIDatePicker
.getRenderedComponent() // on ReduxFormMaterialUIDatePicker, returns DatePicker
.setState({ date: null}); // on DatePicker
}
Here's the DatePicker source code from the material-ui library (it appears that redux-form-material-ui is using an 0.x release, not 1.x).
Assuming you have:
render() {
return (
<form>
...
<Field name="dateOfBirth"
type="text"
component={DatePicker}
className={css.fullWidth}
fullWidth
formatDate={formatDate}
withRef // enable the option
ref="dobField" // name of ref; redux-form-material-ui makes it accessible via this.refs.dobField
/>
...
</form>
)
}

undefined value in semantic-ui input

I have simple from which i used semantic-ui-react to create it :
<Form onSubmit={this.handleSubmit.bind(this)}>
<Form.Field>
<Input placeholder="From ..." type="text" ref="from" />
<Label pointing>please enter valid email adress</Label>
</Form.Field>
<Divider />
now i cant access to value's of the input. here is my code:
from: this.refs.from.value
it's all undefined.how can fix this ?
I recommend to use Form and related components in the controlled way, because most of SUIR components are functional, so they don't support refs. I've a codepen to show it in action. There is also example in docs.

Passed react component is failing on accessibility unit test for form label?

my reusable component looks like this `jsx
return <div>
<label className="label" htmlFor={name}>
</label>
<textarea
name={name}
aria-label={name}
id={id || name}
onChange={this.onChange}
value={value}
/>
</div>;
and its being pulled in like this below inside another component like this
<TxtareaComp
name="Lorem"
value={this.props.lorem}
id="lorem-ipsum"
onChange={this.props.lorem}
/>
and when its rendered it looks like this
<div><label class="label" for="Lorem">Lorem</label>
<textarea name="lorem" " id="Lorem">
</textarea>
</div>
works perfectly fine, but the problem is the its failing tests for accessibility
Its saying I am missing a label
Sniffybara::PageNotAccessibleError:
Form elements must have labels
Elements:
<TxtareaComp...
["#lorem-ipsum"]
Although there is a label, how can i bypass to fix this... while using the existing component?
for needs the id, not the name, of the input. So if you're setting the id via id={id || name} on the input, you need to set htmlFor the same way: htmlFor={id || name} on the label.
Of course, you have the other option: Putting the input inside the label. Then you don't need for or an id on the input (for this; you may need the id for something else). But whether you can do that depends on your styling.

Categories