你可以替换

document.getElementById(this.state.baction).addPrecent(10);

with

this.refs[this.state.baction].addPrecent(10);


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

由于React使用JSX代码创建HTML，我们不能使用document之类的规则方法引用dom。querySelector或getElementById。

相反，我们可以使用React ref系统访问和操作Dom，如下例所示:

constructor(props){

    super(props);
    this.imageRef = React.createRef(); // create react ref
}

componentDidMount(){

    **console.log(this.imageRef)** // acessing the attributes of img tag when dom loads
}


render = (props) => {

const {urls,description} = this.props.image;
    return (

            <img
             **ref = {this.imageRef} // assign the ref of img tag here**
             src = {urls.regular} 
             alt = {description}
             />

        );

}

}

你可以通过指定ref来实现

编辑:在react v16.8.0的函数组件中，你可以用useRef定义一个引用。注意，当你在函数组件上指定一个ref时，你需要使用React。将引用转发给使用useImperativeHandle的DOM元素，以从函数组件中公开某些函数

Ex:

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+中，使用React. createref()创建ref:

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

为了访问元素，使用:

const node = this.myRef.current;

使用React.createRef()的DOC

EDIT

然而，facebook不建议这样做，因为字符串引用有一些问题，被认为是遗留问题，很可能在未来的版本中被删除。

从文档中可以看出:

遗留API:字符串引用 如果你以前用过React，你可能会 熟悉旧的API，其中ref属性是一个字符串，例如 "textInput"， DOM节点被访问为this.ref .textInput。我们 建议反对，因为字符串引用有一些问题，被考虑 遗留的，并且很可能在未来的版本中被删除。如果 你目前正在使用this.ref . textinput来访问引用，我们 建议改用回调模式。

对于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;

记住在箭头函数块中使用:

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

等等……

你可以替换

document.getElementById(this.state.baction).addPrecent(10);

with

this.refs[this.state.baction].addPrecent(10);


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

在类组件和功能组件中，您必须遵循两种不同的方法。

对于类组件 <input type="text" ref={ref => this。myTextInput = ref} />

看一下上面的代码。使用“ref”属性引用相关元素。然后，您将能够使用该引用引用该元素。在这个例子中，我可以使用“this”。myTextInput”指向上面的输入元素。

对于功能组件 const textInput = useRef(null)

使用"useRef"钩子，并将变量名设置为你想要引用的元素的"ref"属性的值(如下所示)。

<input type="text" ref={textInput} />

一个关于功能组件的例子。

import React, {useRef} from 'react'

function CustomTextInput(props) {
  // textInput must be declared here so the ref can refer to it
  const textInput = useRef(null);

  function handleClick() {
     textInput.current.focus();
  }

  return (
    <div>
     <input type="text" ref={textInput} />
    </div>
  );
}

想了解更多吗?给你

免责声明:虽然上面的答案可能是一个更好的解决方案，但作为初学者，当你想要的只是一些非常简单的东西时，你需要接受很多东西。这是为了更直接地回答你最初的问题“我如何在React中选择某些元素”

我认为你的问题中的困惑是因为你有React组件，你正在传递id“Progress1”，“Progress2”等。我相信这不是设置html属性“id”，而是React组件属性。如。

class ProgressBar extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            id: this.props.id    <--- ID set from <ProgressBar id="Progress1"/>
        }
    }        
}

正如上面提到的一些答案，你绝对可以使用document。querySelector在你的React应用程序内部，但你必须清楚，它是选择html输出组件的渲染方法。假设你的渲染输出是这样的:

render () {
    const id = this.state.id
    return (<div id={"progress-bar-" + id}></div>)
}

然后你可以在其他地方做一个正常的javascript querySelector调用，像这样:

let element = document.querySelector('#progress-bar-Progress1')