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>
        )
    }
}

我如何存储React输入元素的值并在其他一些元素中使用它

1 个答案: