如何防止用户在反应中输入负数？

Question

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

https://codesandbox.io/s/react-input-example-forked-xnvxm?file=/src/index.js

<input
   type="number"
   min="0"
   step="1"                        
   onChange={this.handleChange}                        
   className="w-100"
   value= "1"
   />

Answer 1

使用一些本地组件 state 来保存输入的值并使用Math.max(0, value)来确保value prop/attribute 是非负值。 输入的值将是onChange处理程序中的字符串，因此请记住将其强制转换为 state 的数字值。

 function App() { const [value, setValue] = React.useState(0); return ( <div className="App"> <label> Try entering a negative value <input type="number" min="0" step="1" className="w-100" value={value && Math.max(0, value)} onChange={e => setValue(e.target.value? Number(e.target.value): e.target.value)} /> </label> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 2

您可以向输入元素添加一个onKeyPress侦听器，该侦听器将在onChange之前触发，并调用 function 来阻止按下减号按钮时的默认行为。

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

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

请注意，这仍然允许将负值粘贴到输入中。 为此，您可以添加一个onPaste侦听器并检查剪贴板数据以查看它是否为负数并防止默认行为。

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

Answer 3

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

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

Answer 4

您可以过滤掉句柄更改中的输入值。 像这样的东西：

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

这是演示： https://codesandbox.io/s/react-input-example-forked-kr2xc?file=/src/index.js

Answer 5

处理空输入和负数

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

Answer 6

其他解决方案对我不起作用（我可以从滚动鼠标滚轮或触控板输入负数），所以我做了一种硬编码方法：

onChange={function (event) {
  if (value > 0 || event.target.valueAsNumber >= 0) {
    setValue(event.target.valueAsNumber);
  }
}}

Answer 7

<input type="number" onKeyDown={preventNegativeValues}/>

//函数导出

export const preventNegativeValues = (e) => ["e", "E", "+", "-"].includes(e.key) && e.preventDefault()

Answer 8

我更喜欢这个答案，因为它集多种功能于一身。
使用Math.sign()它有以下可能的结果：
如果参数为正，则返回 1。
如果参数为负，则返回 -1
如果参数为 0，则返回 0
如果参数为 -0，则返回 -0
在所有其他情况下，它返回 NaN（不是数字）
例子
if(Math.sign(somevalue).=1){ console.log("please provide a valid number" } }