时间戳

首页 > 解决方案 > 带有反应的验证功能

typescript - 带有反应的验证功能

问题描述

我正在尝试使用 React 进行验证，页脚有几个按钮，然后每个按钮都有其价值（家庭、订单、付款等），我希望当它位于其中一个时，它将是检查（我已经在 css 中拥有它），我还没有设法做出正确的 setState 来实现它。

interface State {
  value: any,
  isActive: boolean
}

class Footer extends React.PureComponent<Props, State>{
  state: State = {
    value: '',
    isActive: false
  }

  render() {
    const { isActive } = this.state
    return (
      <IonFooter>
        <div className="footer-menu-home">
          <button value="home" onClick={() => this.props.history.push('/home')}>
            {isActive && (<div>
                <img src={iconHomeActive} alt="" />
              </div>
            )}
            {!isActive && (
              <div>
                <img src={iconHomeInactive} alt="" />
              </div>
            )}
          ...
         </button> 
         <button onClick={() =>this.props.history.push('/orders')} >
              <div>
                <img src={iconOrderInactive} alt="" />
              </div>
              Orders
                  </button>
        </div>
      </IonFooter>    
    );
  }
}

基本上，当他在其中任何一个上时，将他显示为活动的，只有他站在哪里我不知道如何告诉它或如何让示例站在订单上获取我通过按钮传递的属性的值

标签： typescriptreact-native

解决方案

注意：看起来您也在使用一些路由库。这是有道理的，我建议使用它来查看您所在的链接是否处于活动状态。检查这个https://medium.com/swlh/using-react-router-navlink-to-specify-the-active-element-in-a-navigation-bar-38700ffd4900

尽管如此，您仍然可以使用当前的功能实现相同的功能，如下所示：

// check if state/button value is same as the route pathname
const isActive = this.props.history.location.pathname.split('/')[1] === this.state.value 

// set value in button click handler
handleButtonClick = (value) => () => {
  this.setState({
    value
  }, () => {
    this.props.history.push(`/${value}`)
  })
}
<button onClick={handleButtonClick('home')} />

// conditionally render based on isActive
{isActive ? (
    <img src={iconHomeActive} alt="" />
) : (
    <img src={iconHomeInactive} alt="" />
)}

更新： 问题：我可以通过按钮标签传递值吗？示例：值：“家”

您可以像这样使用event访问button元素的属性

  handleButtonClick = (event) => {
    const value = event.target.value;
    // similarly const name = event.target.name;
    this.setState({
      value
    }, () => {
      this.props.history.push(`/${value}`)
    })
  }

问题：如果你想传递一个className =“active”，你怎么能设置一个条件，当删除时不显示更活跃？

<button className={!!isActive && 'active'} onClick={handleButtonClick} />

推荐阅读