Question

我需要传递状态值以及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

Answer 1

在输入的onchange事件上触发searchProductHandler函数。

即

 <input onChange={this.searchProductHandler}/>

这样，当您单击搜索按钮时，您的状态将具有正确的值。

如何使React Router NavLink等待状态更改？

1 个答案: