We Keep Coding

How to not clear input field onClick

I'm working with React JS and I want to make a hidden button for a text box, of type "Row", such that when I click onto that box, a description will appear on the side, the Row has this structure
<div>
<form key={id}>
<button
className="name"
type="submit"
onClick={clickFunc}
>
{data.text}
</button>
</form>
</div>
Where clickFunc makes a call to enterMouseFunc, a function passed in when called in another component file:
const clickFunc = useCallback((e) => {
e.preventDefault();
enterMouseFunc(e, data);
});
In the description box, there is an input field,
// some other details here
<form key={id} onClick={inputClick}>
<input
type="text"
className="inputParam"
name={id}
onChange={handleChange}
/>
<button
type="submit"
style={{ display: "none" }}
></button>
</form>
My inputClick:
const inputClick = (e) => {
e.preventDefault();
};
My handleChange:
const handleChange = (e) => {
e.preventDefault();
setParameters({ name: e.target.name, value: e.target.value });
};
Which works just fine. However, whenever I click on the Row again, or switch between other Rows, all user's inputs get cleared up. The page doesn't refresh since I already suppress this behavior, but the inputs still get deleted. How to stop it from clearing up the inputs all the time?
Edit:
This is how the interface looks like, where the grey boxes are of type Row. When we click on these boxes, the description will appear on the right as shown:

Are you by any chance triggering the onSubmit of the form? You prevent the inputClick but do not prevent the submit. However, im not sure it would be invoked. Why have a hidden submit button at all?

Does setParameters contain all of the fields values? If so you should copy the existing values before reassigning name and value. If not the issue is elsewhere.
A fix would look like this if that is the case:
const handleChange = (e) => {
e.preventDefault();
setParameters({...parameters, name: e.target.name, value: e.target.value});
};

Unless you would like to submit the form, then you don't necessarily need a <form> element?
Also, having a click event handler on that element (instead of say, a button) is not really common, I am not totally surprised that it causes side effects.
What I would do is remove forms that do not submit: just the standalone inputs that trigger setState/setReducer on change events.
Then you should be able to remove hidden buttons, preventDefault calls, etc.
About the cleaning of the values, I suspect your id value in the key prop to change, which would cause a re-mount of the form children.

how keep the text box show if it is empty in VueJs

I have created a program to hide empty text boxes. I used a checkbox for that. When checking the checkbox then empty text boxes are hidden. Text boxes that have values are keeping.
But now I have a problem. while checkbox are been checked I can not erase the value in the text box to edit. It means when I erase values in the text box to enter new values then that text box is hidden because of it length is 0. Please help me to solve this.

Several ways to do that:
Only update the boolean that filter empty text boxes after they're edited. (i.e. onblur event). You could have a boolean that list the text boxes to hide, but only update it after an onblur event occurs. So it won't be updated while you write in a text box.
Consider a text box empty only if it's empty && it doesn't have current focus (i.e. use the #focus event or get the textbox html element with a $ref to get the html element and use document.activeElement === myTextBox)
This is not a final solution because we don't have enough clues about what does you code look like. But I guess it's a start to resolution :)

As #jaynyxed mentioned, you could use focusin and focusout to help you achieve your goal, I write an example here in code pen and I'll let the code here, so if you cannot open the link I hope you understand how it works.
<template>
<div id="app">
<input
v-if="showA"
type="text"
v-model="inputA"
#focusin="visibleA = true"
#focusout="visibleA = false">
<input
v-if="showB"
type="text"
v-model="inputB"
#focusin="visibleB = true"
#focusout="visibleB = false">
<input type="checkbox" id="checkbox" v-model="hide">
<h5>{{ inputA }} </h5>
</div>
</template>
<script>
export default {
data() {
return {
hide: false,
inputA: '',
inputB: '',
visibleA: false,
visibleB: false,
};
},
computed: {
showA() {
return (this.inputA.length > 0 || !this.hide) || this.visibleA;
},
showB() {
return (this.inputB.length > 0 || !this.hide) || this.visibleB;
}
}
}
</script>
Off course you could do that in many other ways, and maybe this one is not the best possible, but it shows my point.
PS: If you have dozens of input box, I recommends you to create a component to handle that logic, and then you just receive an hide props in your component and emits input for example.

Input form - change the running order of onChange and isDisabled

I have implemented in React a webpage with 3 input fields, each one with the properties of
onChange={this.handleChange} and disabled={this.isDisabled()}
The desired behavior is that when an input field contains 2 digits, the focus will be moved to the next input field.
As long as the field doesn't contain 2 digits, the fields next to must be disabled.
What actually happens, when I type the second digit in the first field, it runs the handleChange function, that function checks whether the field contains 2 digits, find out that yes, and moves the focus to the next input field.
But the next field is disabled! (because the isDisabled function didn't run yet!)
So the cursor doesn't move..
I want to change the order of the happenings, or any other way to solve it.
Do you have any suggestions?

The problem is that this.isDisabled() runs immediately in render but this.handleChange runs on click and most possibly doesn't change the state thus no rerender.
You sholdn't run function on next input, you should pass true or false to its disabled prop. Just make handleChange update the state which defines which fields are disabled. And pass that state to your inputs accordingly.

I had faced the same issue a few days back. My approach was however using react states and focusing the input by its id, that was fetched from state;
So first we make a input - id map for our convenience. And use document.getElementById(this.state.active).focus() function. We change our state via our change handler.
render() {
this.setInputFocus();
return (
<div className="App">
<input id="1" onChange={this.onChange} />
<input id="2" onChange={this.onChange} />
<input id="3" onChange={this.onChange} />
</div>
);
}
setInputFocus = () => {
if (document.getElementById(this.state.active)) {
document.getElementById(this.state.active).focus();
}
};
onChange = e => {
if (e.target.value.length === 2) {
this.setState({ active: this.state.active + 1 });
}
};
Here is a full code that somewhat solves the issue

Semantic UI React, Dropdown Selection

Please take a look at my code for Dropdown,
I'm using the semantic ui react dropdown on an EditProfile component. I have pasted a sample code here, https://codesandbox.io/s/m4288nx4z8, but I could not get it to work because I'm not very familiar with functional components in React, I've always used Class component. But you can check the full code for the whole component below in the github gist.
https://gist.github.com/mayordwells/b0cbb7b63af85269091f1f98296fd9bb
Please, I need help on inserting values from multiple select options of a Dropdown into the Database and also a way to display that back upon viewing the profile edit page again.
I'm using semantic-ui-react in react + rails app.
Also when I insert a value using a normal drop down without multiple select, the value gets persisted into the database.
<Dropdown
placeholder='Select Country'
fluid
search
selection
options={countryOptions}
name='country'
defaultValue={this.state.extraInfo.country}
onChange={(e) => this.handleExtraInfoChange('country', e)}
/>
This code handles change for the dropdown elements.
handleExtraInfoChange = (name, event) => {
let value;
if (event.target.value !== undefined) {
value = event.target.value;
} else {
value = event.target.textContent;
}
let newExtraInfo = Object.assign(this.state.extraInfo, { [name]: value })
this.setState({ extraInfo: newExtraInfo});
}
But when I visit the page again, I get a white blank in the input box. Here's a screen pic for that. When I comment out the defaultValue or value property(i have tried with defaultValue and value), the white blank disappears, but the value picked by a user is also not seen.
Please advice what is a possible solution to this misbehavior? And what is the best way to insert multiple values into the Database?
Thanks in advance for your time.

A functional component does not have state, it's used for composition; you want to store state, so you either have to create a Component class or you need an external state container like redux.

Redux form - own value in Field with type radio

I want to put some text in to the radio field (with Redux form).
I have fields like this:
<Field
name={some.name1}
value={'text1'}
component={renderRadioElement}
type="radio"
/>
<Field
name={some.name2}
value={'text2'}
component={renderRadioElement}
type="radio"
/>
...
Everything works correctly until the first value change.
If I want to change the value several times: state -> form -> ... -> values -> some does not update values.
My question is - how to correctly enter a text value into a radio field?

If I understood correctly your comment you have a value on your component state where youve decleared the form and you wnat to pass in that value to your field.
If thats it what you want to do is dispatch the value to the redux-form store.
To do that in your class you are receiving a prop which is change. injected by redux-form. what you want to do is use that function to set the value
const { change } = this.props;
change('some.name2', this.state.yourValue)
hope it helps