时间戳

首页 > 解决方案 > html输入框的“value”属性内的if语句

javascript - html输入框的“value”属性内的if语句

问题描述

我在<input>下面有一个当前可以使用的框。我想知道我是否能够在物业 if内放置一份声明。value

             <input
                type="text"
                name="name"
                id="name"
                value={stockName.toUpperCase()}
                onChange={event => {
                  // Check that no numbers have been added 
                  const { value } = event.target;

                  if (/[^a-z]/gi.test(value)) { // Check that only letters are in the search
                    setError("Symbols should only contain letters!");
                  } else {
                    setError(null);
                    let uppercaseValue =  value.toUpperCase(); // Make sure its uppercase 
                    setStockName(uppercaseValue);
                  }
                }}/>

例如，我想在value属性中做这样的事情。

         value={event => {

              if (symbolSearchBool){ // If true 
                return symbolSearch // Set value to this, but still allow user to change it if needed
              }
              else { 
                return stockName.toUpperCase() // Set value to whatever user types in
              }
            }}

有没有办法做到这一点？

我正在使用 useState

      const [stockName, setStockName] = useState(); // Hold user input for stock Symbol 
      const [error, setError] = useState(null); // Hold error state based on poor user input

标签： javascripthtmlhook

解决方案

您的建议可以使用ternary-operator。

您的示例不起作用的原因是您正在声明一个函数。通常，React 组件的value属性不会尝试被调用（作为函数），而是期望是值本身。

这并不是说它不能。这只是违反惯例，您应该期望第三方组件不会尝试调用您的value属性。

解决方案

 <input
   type="text"
   name="name"
   id="name"
   value={symbolSearchBool ? symbolSearch : stockName.toUpperCase()}
   onChange={event => { ... }}
/>

注意这里使用了三元运算符，语法如下：
condition ? exprIfTrue : exprIfFalse

您可以阅读如下：

if (condition) {
  return exprIfTrue;
} else {
  return exprIfFalse;
}

推荐阅读