使用1 ref反應如何突出顯示多個組件

Question

我目前使用2個引用來突出顯示2個組成部分中的搜索文本，但是如果我要突出顯示搜索到的文本中有2個以上組件怎么辦？ 我是否可以僅通過1個引用突出顯示2個以上組件中的搜索文本？ 還是我必須像下面的代碼一樣一步一步地做？

<script type="text/babel">
class MyApp extends React.Component {
    constructor() {
        super();

        this.state = {
            inputValue: "",
            fields: [<Ta />],
   fields1: [<Ta1 />]
        };
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(e) {
        let object = this.refs.Progress1;
        let fields = this.state.fields;

        let searchBarText = e.target.value;
        let divText = object.textContent;
        let idx = divText.indexOf(searchBarText);
        if (idx >= 0) {
           let newText = [divText.substring(0, idx),
                <strong>{divText.substring(idx, idx + searchBarText.length)}</strong>, divText.substring(idx + searchBarText.length)];
            this.setState({ inputValue: searchBarText, fields: newText });
        } else {
            this.setState({ inputValue: searchBarText, fields: fields });
        }
//second ref
    let object1 = this.refs.Progress2;

        let fields1 = this.state.fields1;

        let searchBarText1 = e.target.value;
        let divText1 = object1.textContent;
        let idx1 = divText1.indexOf(searchBarText1);
        if (idx1 >= 0) {
           let newText1 = [divText1.substring(0, idx1),
                <strong>{divText1.substring(idx1, idx1 + searchBarText1.length)}</strong>, divText1.substring(idx1 + searchBarText1.length)];
            this.setState({ inputValue: searchBarText1, fields1: newText1 });
        } else {
            this.setState({ inputValue: searchBarText1, fields1: fields1 });
        }


    }

    render() {
        return (
        <div>
            <input
                type="text"
                className="input"
                onChange={this.handleChange}
                placeholder="Search..."
            />
            <p  ref="Progress1" id="try">
                <p>{this.state.fields}</p>
            </p>
  <p  ref="Progress2">
                <p>{this.state.fields1}</p>
            </p>
        </div>
        );
    }
}

class Ta extends React.Component {
    render() {
        return <p >this is a dog</p>;
    }
}

class Ta1 extends React.Component {
    render() {
        return <p>this is another dog</p>;
    }
}




ReactDOM.render(<MyApp />, document.getElementById("app2"));

</script>

Answer 1

您可以使用@FrankerZ建議的數組數組。 這是我的實現方式：

組件狀態：

this.state = {
    inputValue: "",
    fields: [[<Ta />], [<Ta1 />]]
};

handleChange方法：

handleChange(e) {
    for(let i = 1; i <= 2; i++) {
        let refString = "Progress" + i; // pick the suitable ref, Progress1, Progress2, etc...
        let object = this.refs[refString];
        let fields = this.state.fields;

        let searchBarText = e.target.value;
        let divText = object.textContent;
        let idx = divText.indexOf(searchBarText);
        if (idx >= 0) {
            let newText = [divText.substring(0, idx),
                <strong>{divText.substring(idx, idx + searchBarText.length)}</strong>, divText.substring(idx + searchBarText.length)];
            fields[i-1] = newText; // set the new value to the suitable array in the array of arrays
            this.setState({ inputValue: searchBarText, fields: fields });
        } else {
            this.setState({ inputValue: searchBarText, fields: fields });
        }
    }
}

在render方法中，使每個元素對應於數組中合適的數組：

render() {
    return (
    <div>
        <input
            type="text"
            className="input"
            onChange={this.handleChange}
            placeholder="Search..."
        />
        <p  ref="Progress1" id="try">
            <p>{this.state.fields[0]}</p>
        </p>
<p  ref="Progress2">
            <p>{this.state.fields[1]}</p>
        </p>
    </div>
    );
}

現在，如果要添加一個新元素以搜索其文本，請添加該元素並將其ref設為Progress3然后將其添加到狀態為array的數組中。