Javascript 如何防止用户在react中输入负数？

我想限制用户输入负值。我正在使用min=“0”。有了这个，我可以限制用户递减到0，也就是说，用户只能将值递减到0。但他们可以键入“-”。如何防止在反应js

---

在设置输入状态之前，您可以使用正则表达式验证输入，并将输入值与状态值同步

<input
  type="number"                  
  onChange={this.handleChange}                        
  className="w-100"
  value= {this.state.inputVal}
/>

validateNumber = (value) => {
  //true for digits only.
  const regex = /^[0-9]+$/
  return regex.test(value);
}
handleChange = ({target}) => {
  const {name,value} = target;
  const {inputVal} = this.state;

  if(value === '') {
    return this.setState({inputVal:''});
  }

  if(this.validateNumber(value)) {
    this.setState({inputVal:value})
  } else {
    this.setState({inputVal:inputVal})
  }
}

ValidateEnumber=（值）=>{
//仅适用于数字。
常量正则表达式=/^[0-9]+$/
返回正则表达式测试（值）；
}
handleChange=（{target}）=>{
常量{name，value}=target；
const{inputVal}=this.state；
如果（值==''）{
返回此.setState（{inputVal:''}）；
}
if（此.validateEnumber（值））{
this.setState（{inputVal:value}）
}否则{
this.setState（{inputVal:inputVal}）
}
}

使用一些本地组件状态来保存输入值，并使用

Math.max（0，value）

确保

值

属性/属性为非负值。输入的值将是

onChange

处理程序中的一个字符串，因此请记住将其强制回状态的数字值

函数应用程序（）{
const[value，setValue]=React.useState（0）；
返回(
尝试输入负值
setValue（e.target.value？编号（e.target.value）：e.target.value）}
/>
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）
您可以过滤掉handlechange中的输入值。大概是这样的：

const App = () => {
  const [value, setValue] = useState("");

  const handleChange = (e) => {
    if (!isNaN(e.target.value)) {
      setValue(e.target.value);
    }
  };
  return (
    <div className="App">
      <input
        type="text"
        value={value}
        onChange={handleChange}
        className="w-100"
      />
    </div>
  );
};


const-App=（）=>{
const[value，setValue]=useState（“”）；
常数handleChange=（e）=>{
如果（！isNaN（如目标值））{
设定值（即目标值）；
}
};
返回(
);
};

下面是演示：
处理空输入和负数

// Converting App into Class-Component
class App extends React.Component {
  // Set State
  constructor(props) {
    super(props);
    this.state = {
      number: ""
    };
  }

  render() {
    return (
      <div className="App">
        <input
          type="number"
          min="0"
          step="1"
          onChange={(e) => {
            let val = parseInt(e.target.value, 10);
            if (isNaN(val)) {
              this.setState({ number: "" });
            } else {
              // is A Number
              val = val >= 0 ? val : 0;
              this.setState({ number: val });
            }
          }}
          className="w-100"
          // Assign State
          value={this.state.number}
        />
      </div>
    );
  }
}

//将应用程序转换为类组件
类应用程序扩展了React.Component{
//设定状态
建造师（道具）{
超级（道具）；
此.state={
编号：“
};
}
render（）{
返回(
{
设val=parseInt（e.target.value，10）；
if（伊斯南（瓦尔））{
this.setState（{number:}）；
}否则{
//这是一个数字
val=val>=0？val:0；
this.setState（{number:val}）；
}
}}
className=“w-100”
//分配状态
值={this.state.number}
/>
);
}
}
您可以向输入元素添加一个
onKeyPress
侦听器，该侦听器将在
onChange
之前触发，并调用一个函数来防止按下减号按钮时出现默认行为

const preventMinus = (e) => {
    if (e.code === 'Minus') {
        e.preventDefault();
    }
};

<input               
  type="number"
  min="0"
  onKeyPress={preventMinus}
/>

你想让它成为一个受控输入吗？意味着它的值将通过状态变量设置？这也意味着每次对它进行更改时都要重新渲染它。如果（value<0）{return-value}？@codemonkey是的…
value={Math.max（0，this.state.inputValue）}
或者在
handleChange
中进行类似的计算。你能看一下吗：我试过这个代码段，一旦0出现，你就无法摆脱它（除非你使用上/下箭头）。@Christophe对我有用。你是指不能退格/删除0，因此输入为空？对！这就是我的意思。@Christophe对允许空字符串值进行了小调整。你现在应该可以删除
0
。
const preventMinus = (e) => {
    if (e.code === 'Minus') {
        e.preventDefault();
    }
};

<input               
  type="number"
  min="0"
  onKeyPress={preventMinus}
/>

const preventPasteNegative = (e) => {
    const clipboardData = e.clipboardData || window.clipboardData;
    const pastedData = parseFloat(clipboardData.getData('text'));

    if (pastedData < 0) {
        e.preventDefault();
    }
};

<input               
  type="number"
  min="0"
  onPaste={preventPasteNegative}
  onKeyPress={preventMinus}
/>