Сравнение ссылок React для установки имени класса

Итак, я пытаюсь установить className, когда ввод сосредоточен на реакции. Я использую рефы для этого. Я также использую React v16.8.3.

На входах className я сравниваю Focused ref с сфокусированным вводом. Я добавил тестовую функцию, и когда я сравниваю ее с этой функцией, она работает отлично. Но по какой-то причине я не понимаю, почему это не работает в className if/else.

Я надеюсь, что это несколько ясно, что я пытаюсь сделать. Это довольно сложно объяснить.

import React, {useState} from 'react';

function EditSocialmedia (props) {

  const [facebook, setFacebook] = useState(props.social.youtube);
  const [youtube, setYoutube] = useState(props.social.youtube);
  const [twitter, setTwitter] = useState(props.social.twitter);
  const [focusedElement, setFocusedElement] = useState(React.createRef());
  let refFacebook = React.createRef();
  let refYoutube = React.createRef();
  let refTwitter = React.createRef();

  function test () {
    console.log(focusedElement)
    console.log(refFacebook === focusedElement)
    console.log(refYoutube === focusedElement)
    console.log(refTwitter === focusedElement)
  }

  return (
    <div>
      <h2 className="hSmaller hthin">Social Media</h2>

      <input id={`facebook`}
             className={refFacebook === focusedElement ? "active" : ""}
             ref={(input) => refFacebook = input}
             value={facebook ? facebook : ""}
             onChange={() => {setFacebook(refFacebook.value)}}
             onFocus={() => setFocusedElement(refFacebook)}/>

      <input id={`youtube`}
             className={focusedElement === refYoutube ? "active" : ""}
             ref={(input) => refYoutube = input}
             value={youtube ? youtube : ""}
             onChange={() => {setYoutube(refYoutube.value)}}
             onFocus={() => setFocusedElement(refYoutube)}/>

      <input id={`twitter`}
             className={focusedElement === refTwitter ? "active" : ""}
             ref={(input) => refTwitter = input}
             value={twitter ? twitter : ""}
             onChange={() => {setTwitter(refTwitter.value)}}
             onFocus={() => setFocusedElement(refTwitter)}/>

      <div onClick={test}>Test</div>
    </div>
  )
}

export default EditSocialmedia;

reactjs javascript ref
person Community    schedule 22.02.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я заработал. Я преобразовал компонент функции в компонент класса, чтобы он работал следующим образом:

import React, {Component} from 'react';

class EditSocialmedia extends Component {

  constructor(props) {
    super(props);
    this.state = {
      facebook: "",
      youtube: "",
      twitter: "",
      focusedElement: React.createRef()
    };
  }

  render () {
    const {facebook, youtube, twitter} = this.props.social
    return (
      <div>
        <h2 className="hSmaller hthin">Social Media</h2>

        <input id={`facebook`}
               className={this.refFacebook === this.state.focusedElement ? "active" : ""}
               ref={(input) => this.refFacebook = input}
               value={facebook ? facebook : ""}
               onChange={() => {this.setState({facebook: this.refFacebook})}}
               onFocus={() => this.setState({focusedElement: this.refFacebook})}/>

        <input id={`youtube`}
               className={this.refYoutube === this.state.focusedElement ? "active" : ""}
               ref={(input) => this.refYoutube = input}
               value={youtube ? youtube : ""}
               onChange={() => {this.setState({youtube: this.refYoutube})}}
               onFocus={() => this.setState({focusedElement: this.refYoutube})}/>

        <input id={`twitter`}
               className={this.refTwitter === this.state.focusedElement ? "active" : ""}
               ref={(input) => this.refTwitter = input}
               value={twitter ? twitter : ""}
               onChange={() => {this.setState({twitter: this.refTwitter})}}
               onFocus={() => this.setState({focusedElement: this.refTwitter})}/>

      </div>
    )
  }

}

export default EditSocialmedia;
person Community    schedule 22.02.2019

arrow_upward
0
arrow_downward

onFocus изменяет состояние и заставляет ваш компонент перерисовывать и изменять ссылки. className проверяет неверные ссылки во время рендеринга. И test проверяет правильные ссылки после рендеринга.

Попробуйте вызвать test перед return, внутри настройки ref и внутри события onFocus.

person UjinT34    schedule 22.02.2019