使用变量动态渲染 ref

Question

我有一个函数可以动态映射对象和 return 项目列表。现在我希望访问此元素列表中每个元素的 inputRef 以应用一些效果，但它仅应用于最后一个和当前元素，而不应用于呈现的项目

这是渲染函数：

renderSortByOptions() => {
  return Object.keys(this.sortByOptions).map((sortByOption) => {
    let sortByOptionValue = this.sortByOptions[sortByOption];
    return (
      <li
        className={this.getSortByClass(sortByOptionValue)}
        key={sortByOptionValue} 

        ref={this.inputRef} // <====

        onClick={this.handleSortByChange.bind(this, sortByOptionValue)}
      >
        {sortByOption}
      </li>
    );
  });
};

ref 发生在 componentDidUpdate 上，如下所示：

componentDidUpdate();
  {
    if (this.state.showMenu === true) {
      let words = ["viejos", "nuevos", "menor", "mayor"];
      words.forEach((item, i) => {
        this.styleWord(this.inputRef.current, item);
      });
    }
  }

这只是 styleWord 函数：

styleWord(target, word) {
  let html = target.innerHTML;
  html = html.replace(new RegExp(word, "g"), "<i>" + word + "</i>");
  target.innerHTML = html;
};

Answer 1

您需要 InputRefArrary 来保存您动态创建的多个输入的引用。这是一个例子。请检查。

import React from "react";

export default class MultipleTextField extends React.Component {
    constructor(props) {
        super(props);
        this.inputArr = ["name", "age", "gender"];
        this.inputRefArr = [this.inputArr.length];
        this.inputArr.map((input, index) => {
            this.inputRefArr[index] = React.createRef();
        });
        this.state = {values: [this.inputArr.length]};
        this.inputRef = React.createRef();
    }

    onChange = (event, index) => {
        // 1. Make a shallow copy of the values
        let values = [...this.state.values];
        values[index] = event.target.value;
        this.setState({values}, () => {
            console.log(values, 'values')
        });
    };

    clickHandler = (event) => {
        this.inputArr.map((input, index) => {
            alert(`${input} is ${this.state.values[index]}`)
        })
    };

    render() {
        return (
            <form>
                {
                    this.inputArr.map((input, index) => {
                        return (
                            <div key={index}>
                                <label key={index}>
                                    {input}
                                    <input key={index} ref={this.inputRefArr[index]} id="message" type="text"
                                           value={this.state.values[index]}
                                           onChange={(event) => this.onChange(event, index)}/>
                                </label>
                            </div>
                        );
                    })
                }
                <input type="button" value="Click Me" onClick={this.clickHandler}/>
            </form>
        );
    }
}

使用变量动态渲染 ref

Render ref dynamically with variable

javascript

mapping

object

ref

reactjs