Оператор if внутри свойства "value" поля ввода html

Question

У меня есть поле <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

Answer 1

То, что вы предлагаете, возможно с помощью троичного оператора .

Причина, по которой ваш пример не работает, заключается в том, что вы объявляете функцию. Как правило, свойство value компонента React не пытается вызываться (как функция), а скорее должно быть само значением.

Это не означает, что оно не могло. Это просто против соглашения, и вы должны ожидать, что сторонние компоненты не попытаются вызвать ваше свойство 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;
}