Функции проверки с помощью React - PullRequest
Новая
       7

Функции проверки с помощью React

1 голос
/ 01 августа 2020

Я пытаюсь с помощью 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>    
    );
  }
}

В основном, когда он на любом из них, покажите его как активный , только там, где он стоит, я не знаю, как это сказать или как заставить пример стоять на заказах, принимающих значение свойства, которое я передаю по кнопке

1 Ответ

1 голос
/ 01 августа 2020

Примечание: Похоже, вы также используете некоторую библиотеку маршрутизации. В этом есть смысл, и я рекомендую использовать его, чтобы узнать, активна ли ссылка у вас или нет. Отметьте это 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="" />
)}

Обновление: Ques : Могу ли я передать значение этой функции по метке кнопки? пример: value: "home"

Вы можете использовать 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} />
...