如何在 React 中访问 DOM 元素？React 中 document.getElementById（）的等价物是什么

javascript reactjs getelementbyid

2022-08-30 00:02:18

如何在 react.js 中选择某些柱？

这是我的代码：

var Progressbar = React.createClass({
    getInitialState: function () {
        return { completed: this.props.completed };
    },
    addPrecent: function (value) {
        this.props.completed += value;
        this.setState({ completed: this.props.completed });
    },

    render: function () {

        var completed = this.props.completed;
        if (completed < 0) { completed = 0 };


        return (...);
    }

我想使用这个 React 组件：

var App = React.createClass({
    getInitialState: function () {

        return { baction: 'Progress1' };
    },
    handleChange: function (e) {
        var value = e.target.value;
        console.log(value);
        this.setState({ baction: value });
    },
    handleClick10: function (e) {
        console.log('You clicked: ', this.state.baction);
        document.getElementById(this.state.baction).addPrecent(10);
    },
    render: function () {
        return (
            <div class="center">Progress Bars Demo
            <Progressbar completed={25} id="Progress1" />
                <h2 class="center"></h2>
                <Progressbar completed={50} id="Progress2" />
                <h2 class="center"></h2>
                <Progressbar completed={75} id="Progress3" />
                <h2 class="center"></h2>
                <span>
                    <select name='selectbar' id='selectbar' value={this.state.baction} onChange={this.handleChange}>
                        <option value="Progress1">#Progress1</option>
                        <option value="Progress2">#Progress2</option>
                        <option value="Progress3">#Progress3</option>
                    </select>
                    <input type="button" onClick={this.handleClick10} value="+10" />
                    <button>+25</button>
                    <button>-10</button>
                    <button>-25</button>
                </span>
            </div>
        )
    }
});

我想执行 handleClick10 函数，并为我选择的进度条执行操作。但我得到的结果是：

 You clicked:  Progress1
 TypeError: document.getElementById(...) is null

如何在 react.js 中选择某个元素？

答案 1

您可以通过指定ref

编辑：在 react v16.8.0 with function component 中，你可以使用 useRef 定义一个 ref。请注意，当您在函数组件上指定 ref 时，需要对其使用 React.forwardRef 将 ref 转发到用于的 DOM 元素，以从函数组件中公开某些函数useImperativeHandle

前任：

const Child1 = React.forwardRef((props, ref) => {
    return <div ref={ref}>Child1</div> 
});

const Child2 = React.forwardRef((props, ref) => {
    const handleClick= () =>{};
    useImperativeHandle(ref,() => ({
       handleClick
    }))
    return <div>Child2</div> 
});
const App = () => {
    const child1 = useRef(null);
    const child2 = useRef(null);

    return (
        <>
           <Child1 ref={child1} />
           <Child1 ref={child1} />
        </>
    )
}

编辑：

在 React 16.3+ 中，使用来创建你的 ref：React.createRef()

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

要访问该元素，请使用：

const node = this.myRef.current;

DOC for using React.createRef（）

编辑

但是，Facebook建议不要这样做，因为字符串引用存在一些问题，被认为是遗留问题，并且可能会在将来的某个版本中被删除。

从文档中：

旧版 API：字符串引用

如果你以前使用过 React，你可能熟悉一个较旧的 API，其中 ref 属性是一个字符串，比如 “textInput”，DOM 节点作为 this.refs.textInput 访问。我们建议不要这样做，因为字符串引用存在一些问题，被视为遗留问题，并且可能会在将来的某个版本中被删除。如果您当前正在使用 this.refs.textInput 来访问 refs，我们建议您改用回调模式。

React 16.2 及更早版本的推荐方法是使用回调模式：

<Progressbar completed={25} id="Progress1" ref={(input) => {this.Progress[0] = input }}/>

<h2 class="center"></h2>

<Progressbar completed={50} id="Progress2" ref={(input) => {this.Progress[1] = input }}/>

  <h2 class="center"></h2>

<Progressbar completed={75} id="Progress3" ref={(input) => {this.Progress[2] = input }}/>

用于使用回调的 DOC

即使是旧版本的 react 定义 refs，也使用如下所示的字符串

<Progressbar completed={25} id="Progress1" ref="Progress1"/>

    <h2 class="center"></h2>

    <Progressbar completed={50} id="Progress2" ref="Progress2"/>

      <h2 class="center"></h2>

    <Progressbar completed={75} id="Progress3" ref="Progress3"/>

为了得到元素就做

var object = this.refs.Progress1;

请记住在箭头功能块中使用，例如：this

print = () => {
  var object = this.refs.Progress1;  
}

等等...

答案 2

要获取您需要使用的元素，可以在函数内部使用该方法。reactrefReactDOM.findDOMNode

但我更喜欢做的是将ref称为事件内部

<input type="text" ref={ref => this.myTextInput = ref} />

这是一个很好的链接，可以帮助您弄清楚。

如何在 React 中访问 DOM 元素？React 中 document.getElementById（） 的等价物是什么

如何在 React 中访问 DOM 元素？React 中 document.getElementById（）的等价物是什么