Currently, the default value of my input field is 1. If I try to type something in the input field, nothing changes.
interface Orders { order_graph_1: number; order_graph_2: number; } interface MyProps extends Orders { setOrders: (...args: any) => void; // function which takes args...?? } interface MyState extends Orders { //otherProperty: string; }class Setup extends React.Component<MyProps, MyState>{ state = { order_graph_1: this.props.order_graph_1, order_graph_2: this.props.order_graph_2 }; // needs to be an arrow function to access `this` properly // could use ( event: React.ChangeEvent<HTMLInputElement>) // could avoid the assertion by passing the name as an argument setOrders = (event: any) => { this.setState((prevState) => ({ ...prevState, [event.target.name]: parseInt(event.target.value) })); }; render(){ return(<div className="row"><div className="col-6"><p className="text-center">Order of first model: </p><div className="w-100 d-flex justify-content-center"><input className="text-center" name="order_graph_1" type="number" value={this.props.order_graph_1} onChange={this.setOrders.bind(this)} min="1" max="10"/></div></div></div> ); }}export default Setup;To test, I canged the onChange function
onChange={()=>console.log("hello")}everytime I tried to type in the input field, I saw hello being printed in the console but the value of the input field still does not change.
edit:
This was a JS code (https://github.com/MenesesGHZ/polynomial-regression-js):
class RegressionSetup extends React.Component{ constructor(props){ super(props); this.orders = {"order_graph_1":this.props.order_graph_1,"order_graph_2":this.props.order_graph_2 }; } setOrders(event){ this.orders[event.target.name] = parseInt(event.target.value); this.props.setOrders(Object.values(this.orders)); } render(){ return(<div className="row"><div className="col-6"><p className="text-center">Order of first model: </p><div className="w-100 d-flex justify-content-center"><input className="text-center" name="order_graph_1" type="number" value={this.props.order_graph_1} onChange={this.setOrders.bind(this)} min="1" max="10"/></div></div><div className="col-6"><p className="text-center">Order of second model: </p><div className="w-100 d-flex justify-content-center"><input className="text-center"name="order_graph_2" type="number" value={this.props.order_graph_2} onChange={this.setOrders.bind(this)} min="1" max="10"/></div></div></div> ); }}export default RegressionSetup;Upon changing the value of input, a line on a graph changed according to the value. I had to change this code to Typescript. This is what I have now.
interface Orders { order_graph_1: number; order_graph_2: number; } interface MyProps extends Orders { setOrders: (...args: any) => void; // function which takes args...?? } interface MyState extends Orders { //otherProperty: string; }class Setup extends React.Component<MyProps, MyState>{ state = { // it is best not to derive state from props order_graph_1: this.props.order_graph_1, order_graph_2: this.props.order_graph_2 }; // needs to be an arrow function to access `this` properly // could use ( event: React.ChangeEvent<HTMLInputElement>) // could avoid the assertion by passing the name as an argument setOrders = (event: any) => { // I don't love this solution, but we can avoid the TS errors by copying the previous state this.setState((prevState) => ({ ...prevState, [event.target.name]: parseInt(event.target.value) })); }; render(){ return(<div className="row"><div className="col-6"><p className="text-center">Order of first model: </p><div className="w-100 d-flex justify-content-center"><input className="text-center" name="order_graph_1" type="number" value={this.state.order_graph_1} onChange={this.setOrders.bind(this)} min="1" max="10"/></div></div> {/* <div className="col-6"><p className="text-center">Order of second model: </p><div className="w-100 d-flex justify-content-center"><input className="text-center"name="order_graph_2" type="number" value={this.props.order_graph_2} onChange={this.setOrders.bind(this)} min="1" max="10"/></div></div> */}</div> ); }}export default Setup; although it compiles without an error, the input value thing is not working. It does not change the line on the graph so I am assuming the state is not saved. How can I fix this?