在 React 中更改输入的占位符

Question

我有 2 个搜索框。

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

第二个是 Select 组件，它允许用户选择通过以下两个选项之一进行搜索：名称或位置。第一个输入是搜索框，用户将根据 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。

当我尝试在搜索框下方添加 {result} 时，它起作用了，我可以看到所选选项的值，因此它正确地存储了值，但它不能使用占位符。我不明白这是什么问题。

Answer 1

尝试这样的事情：

     <input type="text" class="main-input main-name"  placeholder = {result === "name" ? "Type the Name" : "Type the Location"} />

在 React 中更改输入的占位符

Changing the placeholder of input in React

input

jsx

reactjs

react-select