Как получить значение нажатой кнопки?

Question

Я хочу, чтобы значение кнопки было нажато.Как извлечь значение с помощью функции-ссылки

class Calculator extends Component{
constructor(props){
    super(props);
    this.selectedNumber=this.selectedNumber.bind(this);
}
selectedNumber(e){
    const option = e.value;
    console.log(option);
    alert(option);
}
render(){
    return(
        <div>
            <p>
                <button onClick={this.selectedNumber} name="option">1</button>
                <button onClick={this.selectedNumber} name="option">2</button>
                <button onClick={this.selectedNumber} name="option">3</button>
            </p>
        </div>
    )
}

}

, когда я хочу щелкнуть по ссылочной функции с текстовым значением кнопки = 1, мне нужно 1 и т. Д.

и я получаю эту ошибку :::: "Предупреждение: сбойный тип пропипа: вы предоставили опору value для поля формы без обработчика onChange. Это отобразит поле только для чтения. Еслиполе должно быть изменяемым, используя defaultValue. В противном случае установите либо onChange, либо readOnly. "

Answer 1

Вы можете получить текст элемента, используя: e.target.textContent

selectedNumber(e){
    const option = e.target.textContent;
    console.log(option);  
}

Answer 2

Вы можете установить атрибут value для каждой кнопки:

class Calculator extends Component{

    constructor(props){
        super(props);
        this.selectedNumber=this.selectedNumber.bind(this);
    }
    selectedNumber(e){
        const option = e.target.value;
        console.log(option);
        alert(option);
    }
    render(){
        return(
            <div>
                <p>
                    <button onClick={this.selectedNumber} value={1} name="option">1</button>
                    <button onClick={this.selectedNumber} value={2} name="option">2</button>
                    <button onClick={this.selectedNumber} value={3} name="option">3</button>
                </p>
            </div>
        )
    }
}

Answer 3

Простой как:

class Calculator extends Component{
constructor(props){
    super(props);
    this.selectedNumber=this.selectedNumber.bind(this);
}
selectedNumber(n){
    const option = n;
    console.log(option);
    alert(option);
}
render(){
    return(
        <div>
            <p>
                <button onClick={() => this.selectedNumber(1)} name="option">1</button>
                <button onClick={() => this.selectedNumber(2)} name="option">2</button>
                <button onClick={() => this.selectedNumber(3)} name="option">3</button>
            </p>
        </div>
    )
}