Javascript 如何获得单击按钮的值？

我想点击按钮的值。如何使用referenced函数提取值

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

类计算器扩展组件{ 建造师（道具）{ 超级（道具）； this.selectedNumber=this.selectedNumber.bind（this）； } 所选号码（e）{ const option=e.value； console.log（可选）； 警报（选项）； } render（）{ 返回( 1. 2. 3.

) } }

当我想要单击按钮文本值为1的引用函数时，我想要1，依此类推

我得到了这个错误：“警告：失败的属性类型：您为没有

onChange

处理程序的表单字段提供了

value

prop。这将呈现只读字段。如果字段应该是可变的，请使用

defaultValue

。否则，请设置

onChange

或

只读

”简单到：

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

类计算器扩展组件{ 建造师（道具）{ 超级（道具）； this.selectedNumber=this.selectedNumber.bind（this）； } 所选号码（n）{ const option=n； console.log（可选）； 警报（选项）； } render（）{ 返回( 这个.selectedNumber（1）}name=“option”>1 这个.selectedNumber（2）}name=“option”>2 这个.selectedNumber（3）}name=“option”>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>
    )
}

类计算器扩展组件{ 建造师（道具）{ 超级（道具）； this.selectedNumber=this.selectedNumber.bind（this）； } 所选号码（n）{ const option=n； console.log（可选）； 警报（选项）； } render（）{ 返回( 这个.selectedNumber（1）}name=“option”>1 这个.selectedNumber（2）}name=“option”>2 这个.selectedNumber（3）}name=“option”>3

) }

---

您可以使用：

e.target.textContent

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

---

您可以使用：

e.target.textContent

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

---

您可以设置每个按钮的

值
属性：

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

类计算器扩展组件{
建造师（道具）{
超级（道具）；
this.selectedNumber=this.selectedNumber.bind（this）；
}
所选号码（e）{
const option=e.target.value；
console.log（可选）；
警报（选项）；
}
render（）{
返回(

1.
2.
3.

)
}
}
您可以设置每个按钮的
值
属性：

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

类计算器扩展组件{
建造师（道具）{
超级（道具）；
this.selectedNumber=this.selectedNumber.bind（this）；
}
所选号码（e）{
const option=e.target.value；
console.log（可选）；
警报（选项）；
}
render（）{
返回(

1.
2.
3.

)
}
}

只需这样做示例：onClick={（e）=>this.selectedNumber（e）}然后使用e.target.textContent只需这样做示例：onClick={（e）=>this.selectedNumber（e）}然后使用e.target.textContent

e

是事件对象，而不是element@charlietfl元素的值不是与事件对象一起传递的吗？我知道文本输入就是这样工作的。元素是

e.target

，而

value

是元素的属性，不是事件这也起作用，但我得到了以下错误：警告：失败的属性类型：您向表单字段提供了一个

值
属性，但没有
onChange
处理程序。这将呈现只读字段。如果字段应该是可变的，请使用
defaultValue
。否则，请将
onChange
或
readOnly
@ShivaChandel设置为仔细阅读警告并按说明执行。
e
是事件对象，而不是element@charlietfl元素的值不是与事件对象一起传递的吗？我知道文本输入就是这样工作的。元素是
e.target
，而
value
是元素的属性，不是事件这也起作用，但我得到了以下错误：警告：失败的属性类型：您向表单字段提供了一个
值
属性，但没有
onChange
处理程序。这将呈现只读字段。如果字段应该是可变的，请使用
defaultValue
。否则，请将
onChange
或
readOnly
@ShivaChandel设置为仔细阅读警告并按说明执行。