Javascript 比较React引用以设置类名

因此，当输入集中在react中时，我尝试设置一个类名。我用的是参考文献。我也在使用React v16.8.3

在输入类名称处，我将焦点ref与焦点输入进行比较。 我添加了一个测试函数，当我在这个函数中比较它时，它工作得很好。但是由于某些原因，我不明白为什么它在类名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;

import React，{useState}来自“React”；
功能编辑社交媒体（道具）{
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（））；
让refFacebook=React.createRef（）；
让refYoutube=React.createRef（）；
让refTwitter=React.createRef（）；
功能测试（）{
console.log（focusedElement）
console.log（refFacebook==focusedElement）
console.log（refYoutube==focusedElement）
log（refTwitter==focusedElement）
}
返回(
社会化媒体
refFacebook=input}
值={facebook？facebook:}
onChange={（）=>{setFacebook（refFacebook.value）}
onFocus={（）=>setFocusedElement（refFacebook）}/>
refYoutube=input}
值={youtube？youtube:}
onChange={（）=>{setYoutube（refYoutube.value）}
onFocus={（）=>setFocusedElement（refYoutube）}/>
refTwitter=input}
值={twitter？twitter:}
onChange={（）=>{setTwitter（refTwitter.value）}
onFocus={（）=>setFocusedElement（refTwitter）}/>
测验
)
}
导出默认的EditSocialmedia；

onFocus

更改状态并使组件重新加载和更改引用<代码>类名在渲染过程中检查错误的引用。和

test

在渲染后检查正确的参考值

---

尝试在

return

之前调用

test

，在

ref

设置内部调用，在

onFocus

事件内部调用。

。我将函数componend转换为类componend，并使其工作如下：

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;

import React，{Component}来自'React'；
类EditSocialmedia扩展组件{
建造师（道具）{
超级（道具）；
此.state={
facebook:“，
youtube:，
推特：“，
focusedElement:React.createRef（）
};
}
渲染（）{
const{facebook、youtube、twitter}=this.props.social
返回(
社会化媒体
this.refFacebook=input}
值={facebook？facebook:}
onChange={（）=>{this.setState（{facebook:this.refFacebook}}}
onFocus={（）=>this.setState（{focusedElement:this.refFacebook}）}/>
this.refYoutube=input}
值={youtube？youtube:}
onChange={（）=>{this.setState（{youtube:this.refYoutube}}}
onFocus={（）=>this.setState（{focusedElement:this.refYoutube}）}/>
this.refTwitter=input}
值={twitter？twitter:}
onChange={（）=>{this.setState（{twitter:this.refTwitter}}}
onFocus={（）=>this.setState（{focusedElement:this.refTwitter}）}/>
)
}
}
导出默认的EditSocialmedia；