html输入框“value”属性中的if语句

Question

我下面有一个<input>框，目前可以使用。 我想知道我是否能够在value属性中放置一个if语句。

             <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

Answer 1

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

您的示例不起作用的原因是您声明了 function。 通常，一个 React 组件的value属性不会尝试被调用（作为一个函数），而是应该是 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;
}