Entrada que regresa indefinida, también agregué la función onChange a la entrada, this.state.quantity regresa indefinida en la consola
OrdenMed.js:
export default class OrderMed extends Component { constructor(props){ super(props); this.state = { Meds: [], quantity: '', id:'' } this.onChange = this.onChange.bind(this); } onChange(e) { this.setState({quantity: e.target.quantity}) } render() { return ( ... <form > <input min={1} placeholder='quantity' type='number' value={this.state.quantity} onChange={this.onChange} id="quantity"></input> <button onClick={() => console.log(this.state.quantity)} id='btn-color1' class="btn btn-color ml-2 px-3 mb-2 w-1">✓</button> </form> ... ) }
solo debe establecer event.target.value en la función onChange de esta manera:
onChange(e) { this.setState({quantity: e.target.value}) }
debe optar por funciones de flecha en lugar de las antiguas, reduce las complejidades y se perdió el valor del elemento de destino
export default class OrderMed extends Component { constructor(props){ super(props); this.state = { Meds: [], quantity: '', id:'' } } onChange = (e) => { const quantity = e.target.value; this.setState({quantity}) } render() { return ( ... <form > <input min={1} placeholder='quantity' type='number' value={this.state.quantity} onChange={this.onChange} id="quantity"></input> <button onClick={() => console.log(this.state.quantity)} id='btn-color1' class="btn btn-color ml-2 px-3 mb-2 w-1">✓</button> </form> ... ) }