如何解决如何使React Router NavLink等待状态更改?
我需要传递状态值以及NavLink使用的位置。
用于更新状态的值是从input
获取的,因此在NavLink重定向组件之前,我需要等待状态被更新。
我该怎么做?
我的代码示例:
import React,{Component,Fragment} from 'react'
import './Layout.css'
import { NavLink as RRNavLink,NavLink } from 'react-router-dom'
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
class Layout extends Component {
state = {
searchProduct: false,input: ''
}
searchProductHandler = e => {
let inputValue = e.currentTarget.parentNode.childNodes[0].value
if (inputValue.length >= 3) {
this.setState({
searchProduct: true,input: inputValue
})
} else {
alert('Digite ao menos 3 letras no campo de busca')
}
}
render () {
return (
<Fragment>
<div>
<ul>
<li>
<input />
<NavLink
onClick={this.searchProductHandler}
to={"/search/" + this.state.input}>
<FontAwesomeIcon
icon="search"
color="grey"
style={{cursor: 'pointer'}}
/>
</NavLink>
</li>
</ul>
</div>
<main>
{
this.props.children
}
</main>
</Fragment>
)
}
}
export default Layout
解决方法
在输入的onchange事件上触发searchProductHandler函数。
即
<input onChange={this.searchProductHandler}/>
这样,当您单击搜索按钮时,您的状态将具有正确的值。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。