Question

当我选择其中之一时，我想链接到其他页面。 `

                {

                    this.state.datas.map((data,i)=>(

                        <option key={i} value={data.display_name}><Link to={"/search?q="+encodeURI  (data.name)} onClick={(e)=>this.clearData(data.name)}></Link></option>

                    ))
                }

                </datalist>`

Answer 1

我尝试了几种选择，包括在 Link 内嵌套 option ，反之亦然，但是纯html下拉列表似乎不适用于React Router。

>

这是一个简单的解决方法，

this.state.datas.map((data,i) =>
<option 
  key={i} 
  value={data.display_name}
  onClick={(e) => {this.clearData(data.name); this.props.history.push("/search?q=" + encodeURI(data.name)) }}
>
{data.name} // Perhaps you were missing the stuff between the <option> tags too?
</option>)

如果您已正确地将组件连接到路由器，则组件的道具中将具有 history 对象，并能够调用 history.push 用户到新指定的路线。

这会在每个下拉选项上创建一个事件侦听器，因此，如果您有大量数据，则性能更高的方法是在您的类中创建另一个事件处理程序，并将其附加到 select 的onChange侦听器上strong>元素。

onChange = (event, data) => { this.clearData(data.name); this.props.history.push("/search?q=" + encodeURI(data.name)); }

还有一件事情，请避免将索引 i 用作键，因为它可能导致渲染出现意外问题。尝试为要呈现的元素找到一个全局唯一的值。例如，如果您恰巧在数据库中指定了一个 data.data_id 键，那么它就是一个很好的键。

More on dangers of index as key

根据数据列表选项（React.js）重定向到其他页面

1 个答案: