Как я могу сохранить значение элемента ввода React и использовать его в некоторых других элементах

Question

Я столкнулся с проблемой с элементом ввода React, в котором я хочу взять входное значение (которое является числом), умножить его на другое число и показать значение на элементе span.

Я открыт для любого решения или изменений в моем коде

Я пытался использовать обычный javaScript, но он совсем не работает с React.например, getElementByClass ("className"). value

Вот мой код

class Counter extends Component {
    constructor() {
        super();
        this.state = {
            totalPrice: "Total Price:"
        };
    }

    render() {
        return (
            <div className="counter">
                <input type="number" />
                <span> {this.state.totalPrice} </span>
            </div>
        );
    }
}

Answer 1

Вы можете достичь этого следующим образом: -

import React from 'react'

export default class YourComponent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            totalPrice: 0
        }
    }
    handleChange(ev){
        let totalPrice = ev.target.value * 10 // your number here i have taken 10 for example
        this.setState({totalPrice:totalPrice})
    }
    render() {
        return (
            <div>
                <input type="number" onChange={this.handleChange.bind(this)}/>
                <span>Total Price: {this.state.totalPrice}</span>
            </div>
        )
    }
}