Изменение заполнителя ввода в React

У меня есть 2 окна поиска.

<input type="text" class="main-input main-name"  placeholder="Search" /> 
<Select options={searchOptions} placeholder="Search by" isSearchable/>

2-й - это компонент «Выбрать», который позволяет пользователю выбрать один из двух вариантов поиска: имя или местоположение. Первый вход - это поле поиска, где пользователь вводит конкретное имя или местоположение в соответствии с выбранной опцией в Select. И моя цель - изменить заполнитель этого ввода в зависимости от выбранной опции. В настоящее время заполнитель - это Поиск, но как только пользователь выбирает имя, я хочу иметь заполнитель = Введите имя или, если выбрано местоположение, затем отобразите Введите местоположение, соответственно.

const searchOptions = [
    {value: 'name', label:'Name'},
    {value: 'location', label:'Location'}
];

Это параметры, предоставляемые Select.

Чтобы сохранить выбранную опцию, я использовал Usestate, создал для нее функцию и обновил поля поиска. Вот как выглядит мой код:

function Searchbox () {
const [result,setResult]=useState(searchOptions.value)
const setResultHandler = e => {
  setResult(e.value);
}

 return (
     <input type="text" class="main-input main-name"  placeholder={{result}="name" ? "Type the Name" : "Type the Location"} />
      <Select options={searchOptions} onChange={setResultHandler} placeholder="Search by" isSearchable/>

Это дает мне ошибку в строке, где я меняю местозаполнитель - TypeError: Assignment to constant variable.

Когда я пытаюсь добавить {результат} под окнами поиска, он работает, и я вижу значение выбранной опции, поэтому он сохраняет значение правильно, но не работает с заполнителем. Я не понимаю, в чем проблема.


person iaaninita    schedule 17.03.2021    source источник


Ответы (1)


Попробуйте что-нибудь подобное:

     <input type="text" class="main-input main-name"  placeholder = {result === "name" ? "Type the Name" : "Type the Location"} />
person Cristian Riță    schedule 17.03.2021
comment
Омг, теперь я совершил эту глупую ошибку. Код сейчас работает. Большое спасибо ! - person iaaninita; 17.03.2021