undefined value in semantic-ui input - javascript

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.

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

v-model depending on conditions [duplicate]

I have a vue component that shows a form populated with items from a selected item to edit. Now I don't want to have to use a second form for creating a new item. At the moment I auto populate and update the item with v-model which obviously updates the object. Am I not able to use conditional operators in this like so?
<form #submit.prevent>
<div class="field">
<label class="label">Job Title</label>
<p class="control">
<input type="text" class="input" placeholder="Job title" v-model="experiences[editIndex].title ? experiences[editIndex].title : ''" />
</p>
</div>
</form>
You can use conditional operators with v-model, but you can't give v-model a string like you're attempting in your example.
I wouldn't use the same form for editing and creating (might be preference). I would make the form its own component and then make two additional form components for editing and creating.
However, if you really want to handle the logic in each input's v-model directive, you would need to give it a variable in the last part of the ternary operator. Something like this:
v-model="experiences[i].title ? experiences[i].title : newExperience.title"
If you use eslint-plugin-vue it will complain about ternary in v-model.
ESLint: 'v-model' directives require the attribute value which is
valid as LHS. (vue/valid-v-model)
So I'd rather explicitly use a pair of :value and #input props.
Like that:
<input
type="text"
class="input"
placeholder="Job title"
:value="experiences[editIndex].title ? experiences[editIndex].title : ''"
#input="experiences[editIndex].title = $event.target.value"
/>
Also, you can use some function for #input, which will check property existence and add it if necessary.

Disable input auto complete on React.js

I know this has been asked a 1000 times, but all the answers say the same yet neither work for me at all.
Here'm my input field:
<input
className={
required ? "input-field__input input-field__input--required" : "input-field__input"
}
id={placeHolder}
type={type}
placeholder={placeHolder}
autoComplete="new-password"
value={value || ""}
onChange={e => handleChange(e.target.value)}
/>
I've tried autoComplete="new-password", autocomplete="new-password", autoComplete="none" & autocomplete="none" but chrome keeps showing me sugestions based on past inputs, no matter which one I've tried. Is there something else happening that might affect it?
Add autoComplete="off" in the form tag instead of the input tag.
Below is the code to follow :-
<form autoComplete="off">
<input id="input" type="text" placeholder="Enter Text" />
</form>
{autoComplete} syntax i.e camelCase for React, html follow {autocomplete} in lowercase. JSX also convert it to lower case. You can see the rendered DOM.
Here is the demo :-
https://codepen.io/gahlotbaba/pen/JjdzmmB?editors=0111
Hope it helps.
you can add a dummy invisible input above your password
<div style={{ height: 0px; overflow: hidden; background: transparent; }}>
<input type="password"></input>
</div>
autoComplete="new-password" should work for you.
this will remove the autocomplete
more on this here
https://github.com/react-toolbox/react-toolbox/issues/1795

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.

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

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.

Categories