React中使用React.createRef()访问多个DOM元素的方法及代码修正

我明白你现在遇到的困扰啦——你想通过Ref分别控制两个不同的span元素，但目前的代码里两个span共用了同一个Ref赋值逻辑，导致最后this.textInput只会保存最后一个被渲染的span元素，所以不管点击哪个按钮，修改的都是第二个span的样式。

咱们一步步修正这个问题，这里有两种常用且易懂的方法可以实现你的需求：

方法一：给每个元素创建独立的React.createRef() #

这种方式最直接，给每个需要控制的元素单独分配一个Ref：

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    // 为两个span分别创建独立的Ref
    this.greenSpanRef = React.createRef();
    this.redSpanRef = React.createRef();
    this.state = { fname:"" };
  }

  green = () => {
    // 通过Ref的current属性访问对应DOM元素
    this.greenSpanRef.current.style.backgroundColor = "green";
  }

  red = () => {
    this.redSpanRef.current.style.backgroundColor = "red";
  }

  render() {
    return (
      <div>
        <span id="green" ref={this.greenSpanRef}>Green</span><br/>
        <span id="red" ref={this.redSpanRef}>Red</span><br/>
        <button onClick={this.green}>For Green</button><br/>
        <button onClick={this.red}>For Red</button><br/>
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"));

方法二：用回调Ref把元素存储到对象中 #

如果后续需要管理更多元素，或者想动态维护Ref，可以把多个元素的Ref统一存到一个对象里：

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.elementRefs = {}; // 用来存储所有元素Ref的对象
    this.state = { fname:"" };
  }

  // 通用的回调Ref函数，根据元素id存储对应的DOM节点
  saveElementRef = (element) => {
    if (element) {
      this.elementRefs[element.id] = element;
    }
  }

  green = () => {
    this.elementRefs.green.style.backgroundColor = "green";
  }

  red = () => {
    this.elementRefs.red.style.backgroundColor = "red";
  }

  render() {
    return (
      <div>
        <span id="green" ref={this.saveElementRef}>Green</span><br/>
        <span id="red" ref={this.saveElementRef}>Red</span><br/>
        <button onClick={this.green}>For Green</button><br/>
        <button onClick={this.red}>For Red</button><br/>
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"));

原代码问题出在哪？ #

你原来的setTextInputRef会被两个span依次调用：第一次渲染绿色span时，this.textInput被赋值为绿色span的DOM节点；第二次渲染红色span时，这个变量又被覆盖成红色span的节点。所以最后this.textInput永远指向最后一个渲染的元素，点击按钮时自然只能修改它的样式啦。

用上面两种方法，就能分别控制每个span的背景颜色了，你可以根据自己的需求选择合适的方式~

内容的提问来源于stack exchange，提问作者Kanekar