Почему мои кнопки не реагируют? - PullRequest
Новая
       22

Почему мои кнопки не реагируют?

0 голосов
/ 19 марта 2019

Так что я новичок, чтобы реагировать, и я хотел бы добавить логику рендеринга, чтобы кнопки «Обновить курс» и «Удалить курс» отображались, только если:

  • Есть аутентифицированный пользователь.

  • И user._id совпадений UserId вот что у меня пока так:

CourseDetail 

    class CourseDetail extends Component {
              constructor(props) {
                super(props);
                this.state = {
                  course: [],
                  user: [] //user state contains user data
                };

                this.handleButtonLogic = this.handleButtonLogic.bind(this);
              }

                componentDidMount() {
                  this.handleButtonLogic() {
                }


              handleButtonLogic() {
                const user = this.state; 
                const isLoggedIn = localStorage.getItem('IsLoggedIn');
                const UserId = localStorage.getItem('UserId');
                const button = document.getElementsByName('button')
            if (!isLoggedIn && user._id !== UserId) {
             button.style.display = 'none'
            }  else {
              button.style.display = ''
            }
              }

            render() {
        const { course, user } = this.state;

        return (//JSX inside
          <div>
            <div className="actions--bar">
              <div className="bounds">
                <div className="grid-100">
                  <span>
                    <NavLink to={`/courses/${course._id}/update`} className="button">Update Course</NavLink> 
                    <NavLink to={"#"} className="button" onClick={this.handleDelete} > Delete Course</NavLink>
                  </span>
    }

export default CourseDetail;

это ошибка, которую я получаю:

React Error

может кто-нибудь помочь?

Ответы [ 2 ]

1 голос
/ 19 марта 2019

Я просто переместил вашу логику внутрь самого рендера и использовал троичный оператор для условного рендеринга.Если пользователь прошел проверку подлинности и идентификатор пользователя совпадает с идентификатором текущего пользователя, на нем отобразятся кнопки.

Более пристальный взгляд на троицу: 

{(!isLoggedIn && user._id !== UserId) ? (<span>
   <NavLink to={`/courses/${course._id}/update`} className="button">Update Course</NavLink>
   <NavLink to={"#"} className="button" onClick={this.handleDelete}>
                  Delete Course</NavLink>
</span>) : null}

Отредактированный код: handleButtonLogic() не требуется, если мы делаем следующее, я тоже удалил.

class CourseDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      course: [],
      user: [] //user state contains user data
    };
  }

  render() {
    const {course, user} = this.state;
    const isLoggedIn = localStorage.getItem('IsLoggedIn');
    const UserId = localStorage.getItem('UserId');
    return (
      <div className="actions--bar">
        <div className="bounds">
          <div className="grid-100">
            {(!isLoggedIn && user._id !== UserId) ? (
              <span>
                <NavLink to={`/courses/${course._id}/update`} className="button">Update Course</NavLink>
                <NavLink to={"#"} className="button" onClick={this.handleDelete}>
                  Delete Course</NavLink>
              </span>
            ) : null}
        </div>
      </div>
    </div>
  )
}

export default CourseDetail;
0 голосов
/ 19 марта 2019

Для реакции нужно другое мышление, чем изменение DOM из javascript. Здесь я добавил логику, чтобы показать / скрыть кнопку, добавив логику, чтобы скрывать имя класса или нет. Вы также можете добавить условную логику ко всему диапазону. 

const hide = {
  display: none  
};

class CourseDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      course: [],
      user: []
    };
  }

  handleDelete = () => {
  }

  handleUpdate = () => {
  }

  render() {
    const { course, user } = this.state;

    return (
      //JSX inside
      <div>
        <div className="actions--bar">
          <div className="bounds">
            <div className="grid-100">
              <span>
                <NavLink 
                  to={`/courses/${course._id}/update`}
                  className={'button ' + (!isLoggedin && user._id != UserId ? 'hide' : '')}
                  onClick={() => this.handleUpdate()}
                >
                    Update Course
                </NavLink> 
                <NavLink 
                  to={"#"} 
                  className={'button ' + (!isLoggedin && user._id != UserId ? 'hide' : '')}
                  onClick={() => this.handleDelete()} 
                >
                    Delete Course
                </NavLink>
              </span>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default CourseDetail;
...