如何在React中比较两个数值大小并通过state存储结果

你的代码存在多处语法错误和逻辑疏漏，以下是修复后的可运行代码：

import React from 'react';
class Greatersum extends React.Component
{
  constructor(props)
  {
    super(props);
    this.state = {
      a: '',
      b: '',
      c: ''
    }
    this.addFormData = this.addFormData.bind(this);
  }
  addFormData() {
    // 先将输入的字符串转为数字，避免字符串比较的逻辑错误
    const numA = Number(this.state.a)
    const numB = Number(this.state.b)
    // 两种写法都可以，选一种即可
    // 写法1：三目运算符实现
    this.setState({c: numA > numB ? numA : numB})
    // 写法2：调用Math.max方法更简洁
    // this.setState({c: Math.max(numA, numB)})
  }
  render()
  {
    return(
      <div>
        <input type="text" placeholder="输入第一个数字" onChange={e=> this.setState({a:e.target.value})}/><br/><br/>
        <input type="text" placeholder="输入第二个数字" onChange={e=> this.setState({b:e.target.value})}/><br/><br/>
        <input type="text" value={this.state.c} readOnly/><br/><br/>
        <button type="button" onClick={this.addFormData}>Click Me</button>
      </div>
    )
  };
}
export default Greatersum;

主要修改点说明 #

• 修正了类名定义的语法错误，删除了原代码中多余的符号和拼写错误
• 补充了输入值转数字的逻辑：输入框默认获取的value是字符串类型，直接比较会出现'10' < '2'的错误结果，转为数字后比较逻辑才正确
• 修复了三目运算符的语法错误，正确的三目运算符格式为判断条件 ? 条件成立返回值 : 条件不成立返回值
• 给展示结果的输入框加了readOnly属性避免用户误修改，按钮修改为type="button"避免触发表单默认提交行为
• 新增了输入框占位提示文字，优化使用体验

内容的提问来源于stack exchange，提问作者Pankaj Rana