Hello, everyone.
I have a form containing three text fields. The first has a fixed value, the second is modifiable, the third is not modifiable, but its value is calculated as the second is modified. I used the react components as mentioned above.
Everything goes well during development, but once the application is deployed, it is impossible to retrieve the value of the third text field. Need some help please
Everything goes well during development, but once the application is deployed, it is impossible to retrieve the value of the third text field. Need some help please
But you are mixing jQuery with React to read the input, that would be the first thing to fix, yon use react refs to read the inputs, see here. So thatâs where Iâd start, Iâd also isolate just the reading of the input and test it in production and console that, because youâve the input parsing wrapped in if statements and itâs hard to tell where is the issue is.
In productions, itâs either there is no jQuery or some other error, but itâs hard to tell from the snippet you provided. So, you need to simplify the form, use react refs and isolate the issue by process of elimination.
I agree with that using jquery is unnecessary in this case. But I used it before it didânt work with refs. Now I remember done my first tests not with jquery. But, unfortunately, it didnât work. Now, I decided to abandon jquery again, it is not necessary.
The code style above is just a set of excerpts from the problem I wanted to present to you. It is not possible, from this post, to view the organization of my code. In fact, I use the Mantra architecture, and my form and its constructor are in a rather large React component. If you think it is not necessary to use the componentDidMount and the setInterval, where and how do I call the function that changes the value of the third field as the second field is edited? If you wish, I can isolate this code in a component and send it to you for better readability. I know the difference between array .map and .forEach, and I chose to use .map. Do you really think it could be a problem here? Why?
please present us at least the whole component with the render function.
its constructor are in a rather large React component.
so maybe break it apart first and refactor it.
If you think it is not necessary to use the componentDidMount and the setInterval, where and how do I call the function that changes the value of the third field as the second field is edited?
React works by changing props and state. You never ever directly manipulate dom-elements. Instead in your render function you do something like:
// ... in your render function
<input type="number" value={this.state.value1} onChange={this.onValue1Change} />
<input type="number" value={this.state.value2} onChange={this.onValue2Change} />
<input type="number" disabled value={this.calculateValue3} /> { /* acutally, if the user does not need to change value 3, you can also just use a span, p or whatever */}
so if onValue1Change or onValue2Change is called, you calculate value3 with some function.
I know the difference between array .map and .forEach, and I chose to use .map. Do you really think it could be a problem here? Why?
no, its not the problem, but it makes the code harder to reason about, because it is semantically wrong and could show some lack of javascript knowledge. Why did you chose to use map? (map is to transform an array into another one, forEach is to do side effects). Thatâs also why i would recommend some code style checker like eslint.
@macrozone has covered most of it, and time consuming though it may be to get some of that stuff configured (if youâve never done it before), it will save you hours of time every week/month. I highly recommend it.
As for your original question, the way you describe it, there needs to be only one single input (for value 2). If value 1 is fixed, then why isnât it being hardcoded (or loaded from the database)?
Value 2 needs to be modifiable, of course.
Value 3 can be updated as a part of the onChange of value2âs input.
Here is a simple implementation of the above (keeping in mind it is just one of many possible ways to do it): https://codesandbox.io/s/yv5o0nykm9
import React, { Component } from 'react';
class Example extends Component {
constructor(props) {
super(props);
this.state = {
value2: '',
value3: '',
}
this.setValue2 = this.setValue2.bind(this);
}
setValue2(e) {
const value2 = e.target.value;
const value3 = value2 + 'whatever calculation is needed to create value 3 can go here' // can use a function too...
this.setState({value2, value3});
}
render() {
const value1 = 'Value 1' // Load this from the db or hard code it, whatever
const { value2, value3 } = this.state;
return (
<div>
<p>{value1}</p>
<input type="text" value={value2} onChange={this.setValue2} />
<p>{value3}</p>
</div>
);
}
}
export default Example;
Thanks, guys. For @hemalrr87 and @macrozone, value1 is not a state, but come from the database. The default value of value2 is value1, but this value2 is modifiable. Iâll try your proposals, then Iâll come back to you with a more readable code extract. Iâm working on it. I am currently eliminating the parts that are not relevant to my question.
I have aanother problem with my app. Unable to test the deploy app since I update my meteor version to 1?8.0.2. I receive this error: POST http://192.168.100.2/meteor/dynamic-import/fetch net::ERR_CONNECTION_REFUSED. Iâve been desperately looking for the solution for several days.
