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

您所建议的使用三元运算符是可能的。

您的示例不起作用的原因是您正在声明一个函数。通常，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;
}